[mw_shl_code=css,αληθές] <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="κείμενο/css"> *{περιθώριο:0; συμπλήρωση: 0; } .container{ πλάτος:750px; ύψος: 200 εικονοστοιχεία; περιθώριο:30px αυτόματο; υπερχείλιση: κρυφό; φόντο:#000; θέση: σχετική; } .eyesBoxs{πλάτος:130px; ύψος: 70 εικονοστοιχεία; θέση:απόλυτη· κορυφή: 50 εικονοστοιχεία; } .pullLeft{αριστερά:100px; } .pullRight{δεξιά:100px; } .προφίλ{ πλάτος: 130 εικονοστοιχεία; ύψος: 70 εικονοστοιχεία; ιστορικό:#fff; θέση:απόλυτη· κορυφή:0; αριστερά:0; υπερχείλιση: κρυφό; ακτίνα περιγράμματος:0 70px 0 50px;
} .σκιά{ εμφάνιση:μπλοκ; πλάτος: 130 εικονοστοιχεία; ύψος: 70 εικονοστοιχεία; θέση:απόλυτη· κορυφή:0; z-index:5; ακτίνα περιγράμματος:0 90px 0 60px; box-shadow: 5px 12px 2px 5px rgba (0,0,0,.25) ένθετο;
} .skewLeft{ μετασχηματισμός:λοξόςX(15 μοίρες); -webkit-transform:λοξόX(15 μοίρες); -o-μετασχηματισμός:λοξόX(15deg);
} .skewRight{ μετασχηματισμός: λοξή κλίμακα X (-15 μοίρες) (-1,1); -webkit-transform:skewX(-15deg) κλίμακα(-1,1); -o-μετασχηματισμός: λοξή κλίμακα X (-15 μοίρες) (-1,1);
} .basic{ πλάτος: 60 εικονοστοιχεία; ύψος: 60 εικονοστοιχεία; φόντο:#000; θέση:απόλυτη· κορυφή: 50%; αριστερά:50%; z-δείκτης:10; περιθώριο-κορυφή:-30px; ακτίνα περιγράμματος: 60%;
} .basic:πριν{ περιεχόμενο:""; εμφάνιση:μπλοκ; πλάτος: 10 εικονοστοιχεία; ύψος: 11 εικονοστοιχεία; θέση:απόλυτη· αριστερά:15px; κορυφή: 15 εικονοστοιχεία; z-δείκτης:100; ακτίνα περιγράμματος: 60%; εικόνα φόντου:ακτινική κλίση(κύκλος,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3)); -webkit-background-image:radial-gradient(κύκλος,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3)); -o-background-image:radial-gradient(κύκλος,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
} .pullLeft .basic{ περιθώριο-αριστερά:-33px;
} .pullRight .basic{ περιθώριο-αριστερά:-27px;
} .μάτια{ πλάτος: 55 εικονοστοιχεία; ύψος: 55 εικονοστοιχεία; ιστορικό:#ff0000; θέση:απόλυτη· κορυφή: 8 εικονοστοιχεία; ακτίνα περιγράμματος: 60%; box-shadow:0 0 2px 4px #bd0000 ένθετο,0 0 0 2px #000;
} .pullLeft .eyes{αριστερά:35px; } .pullRight .eyes{right:35px; } .eyes .line{ πλάτος: 64%; ύψος: 64%; ιστορικό:#ff0000; θέση:απόλυτη· δεξιά:0; αριστερά:0; κορυφή: 10 εικονοστοιχεία; περιθώριο:0 αυτόματο; ακτίνα περιγράμματος: 60%; box-shadow:0 0 2px 0 #b20000 ένθετο;
} .eyes .line:πριν{ περιεχόμενο:""; εμφάνιση:μπλοκ; πλάτος: 10 εικονοστοιχεία; ύψος: 11 εικονοστοιχεία; θέση:απόλυτη· αριστερά:3px; κορυφή: 4 εικονοστοιχεία; z-δείκτης:100; ακτίνα περιγράμματος: 60%; εικόνα φόντου: ακτινική κλίση (κύκλος, rgb (225,225,225), rgb (225,225,225), rgba(225,225,225,0.7), rgba(225,225,225,0.3)); -webkit-background-image:radial-gradient(κύκλος,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3)); -o-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
} .eyes .line:after{ περιεχόμενο:""; εμφάνιση:μπλοκ; πλάτος: 10 εικονοστοιχεία; ύψος: 10 εικονοστοιχεία; θέση:απόλυτη· φόντο:#000; δεξιά:0; αριστερά:-1px; κορυφή: 13 εικονοστοιχεία; z-δείκτης:100; περιθώριο:0 αυτόματο; ακτίνα περιγράμματος: 60%; μετασχηματισμός: περιστροφή (150 μοίρες); -webkit-transform: περιστροφή (150 μοίρες); -o-μετασχηματισμός: περιστροφή (150 μοίρες); κινούμενα σχέδια: έγχρωμο 20s ευκολία άπειρο. -webkit-animation: χρώμα 20s ευκολία άπειρο. -o-animation: χρώμα 20s ευκολία άπειρο.
} @keyframes χρώμα{ 0%{φόντο:#000; } 35%{φόντο:#000; } 40%{φόντο:#f00; } 100%{φόντο:#f00; }
} @-webkit-keyframes χρώμα{ 0%{φόντο:#000; } 35%{φόντο:#000; } 40%{φόντο:#f00; } 100%{φόντο:#f00; }
} @-o-keyframes χρώμα{ 0%{φόντο:#000; } 35%{φόντο:#000; } 40%{φόντο:#f00; } 100%{φόντο:#f00; }
}
/*******三勾玉 开始*******/ .άγκιστρο{ πλάτος: 92%; ύψος: 92%; θέση:απόλυτη· δεξιά:0; αριστερά:0; κορυφή: 5%; περιθώριο:0 αυτόματο; ακτίνα περιγράμματος: 60%;
} .άγκιστρο .bar{ εμφάνιση:μπλοκ; πλάτος: 100%; ύψος: 100%; θέση:απόλυτη· αριστερά:0; κορυφή:0; ακτίνα περιγράμματος: 60%;
} .άγκιστρο .bar b{ εμφάνιση:μπλοκ; πλάτος: 8 εικονοστοιχεία; ύψος: 8 εικονοστοιχεία; φόντο:#000; θέση:απόλυτη· αριστερά:0; κάτω:0; ακτίνα περιγράμματος: 60%;
} .άγκιστρο .bar b:after{ περιεχόμενο:""; πλάτος: 8 εικονοστοιχεία; ύψος: 8 εικονοστοιχεία; χρώμα περιγράμματος: διαφανές διαφανές #000 διαφανές. στυλ περιγράμματος: συμπαγές; πλάτος περιγράμματος:0 0 5px 0; θέση:απόλυτη· κορυφή: -1 εικονοστοιχείο; αριστερά:-3px; z-δείκτης:100; ακτίνα περιγράμματος:0 0 0 70%; μετασχηματισμός: περιστροφή (-75 μοίρες); -webkit-μετασχηματισμός: περιστροφή (-75 μοίρες); -o-μετασχηματισμός: περιστροφή (-75 μοίρες);
} .άγκιστρο .bar:nth-child(1){ μετασχηματισμός: περιστροφή (10 μοίρες); -webkit-μετασχηματισμός: περιστροφή (10 μοίρες); -o-μετασχηματισμός: περιστροφή (10 μοίρες);
} .άγκιστρο .bar:nth-child(2){ μετασχηματισμός: περιστροφή (130 μοίρες); -webkit-transform: περιστροφή (130 μοίρες); -o-μετασχηματισμός: περιστροφή (130 μοίρες);
} .άγκιστρο .bar:nth-child(3){ μετασχηματισμός: περιστροφή (250 μοίρες); -webkit-μετασχηματισμός: περιστροφή (250 μοίρες); -o-μετασχηματισμός: περιστροφή (250 μοίρες);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/ .σωλήνας{ πλάτος: 93%; ύψος: 93%; θέση:απόλυτη· δεξιά:0; αριστερά:0px; κορυφή: 2 εικονοστοιχεία; περιθώριο:0 αυτόματο; φόντο:#000; ακτίνα περιγράμματος: 60%;
} .σωλήνας .bar{ εμφάνιση:μπλοκ; πλάτος: 10 εικονοστοιχεία; ύψος: 20 εικονοστοιχεία; στυλ περιγράμματος: συμπαγές; πλάτος περιγράμματος: 0 0 0 10 εικονοστοιχεία; χρώμα περιγράμματος: διαφανές διαφανές διαφανές μαύρο. θέση:απόλυτη· ακτίνα περιγράμματος: 100% 0 0 0;
} .tube .bar:nth-child(1){ κορυφή: -10 εικονοστοιχεία; αριστερά:2px; μετασχηματισμός: περιστροφή (-10 μοίρες);
} .tube .bar:nth-child(2){ κάτω: 0px; δεξιά:-10px; μετασχηματισμός: περιστροφή (105 μοίρες); -webkit-μετασχηματισμός: περιστροφή (105 μοίρες); -o-μετασχηματισμός: περιστροφή (105 μοίρες);
} .tube .bar:nth-child(3){ κάτω: -3 εικονοστοιχεία; αριστερά:-10px; μετασχηματισμός: περιστροφή (235 μοίρες); -webkit-transform: περιστροφή (235 μοίρες); -o-μετασχηματισμός: περιστροφή (235 μοίρες);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/ .trans{ πλάτος: 130 εικονοστοιχεία; ύψος: 70 εικονοστοιχεία; θέση:απόλυτη· υπερχείλιση: κρυφό; κορυφή:0; αριστερά:0; ακτίνα περιγράμματος:0 70px 0 50px;
} .trans .bar{ εμφάνιση:μπλοκ; πλάτος: 9 εικονοστοιχεία; ύψος: 9 εικονοστοιχεία; φόντο:#000; θέση:απόλυτη· κορυφή: 50%; z-index:2; περιθώριο:-4px 0 0 -4px; ακτίνα περιγράμματος: 60%;
} .trans .bar:μετά{ περιεχόμενο:""; εμφάνιση:μπλοκ; πλάτος: 11 εικονοστοιχεία; ύψος: 12 εικονοστοιχεία; θέση:απόλυτη· κορυφή:-13 εικονοστοιχεία; αριστερά:-13px; z-δείκτης:100; ακτίνα περιγράμματος: 60%; Ιστορικό:RGBA (250,250,250,.85);
} .pullLeft .trans .bar{ μετασχηματισμός: λοξό X (-15 μοίρες); -webkit-transform:λοξόX(-15deg); -o-μετασχηματισμός:λοξόX(-15deg);
} .pullLeft .trans .bar{αριστερά:48%; } .pullRight .trans .bar{ μετασχηματισμός: λοξή κλίμακα X (-15 μοίρες) (-1,1); -webkit-transform:skewX(-15deg) κλίμακα(-1,1); -o-μετασχηματισμός: λοξή κλίμακα X (-15 μοίρες) (-1,1);
} .pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/ .ani-στενό{ κινούμενα σχέδια: ani-narrow 20s ease-out άπειρο. -webkit-animation: ani-narrow 20s ease-out άπειρο. -o-animation: ani-narrow 20s ease-out άπειρο.
} @keyframes ani-στενό{ 0%{αδιαφάνεια:1; μετασχηματισμός:κλίμακα(1); } 5%{αδιαφάνεια:1; μετασχηματισμός:κλίμακα(1); } 10%{αδιαφάνεια:0; μετασχηματισμός:κλίμακα(0); } 87%{αδιαφάνεια:0; μετασχηματισμός:κλίμακα(0); } 90%{αδιαφάνεια:1; μετασχηματισμός:κλίμακα(1); } 100%{αδιαφάνεια:1; μετασχηματισμός:κλίμακα(1); }
} @-webkit-keyframes ani-narrow{ 0%{αδιαφάνεια:1; -webkit-transform:κλίμακα(1); } 5%{αδιαφάνεια:1; -webkit-transform:κλίμακα(1); } 10%{αδιαφάνεια:0; -webkit-transform:κλίμακα(0); } 87%{αδιαφάνεια:0; -webkit-transform:κλίμακα(0); } 90%{αδιαφάνεια:1; -webkit-transform:κλίμακα(1); } 100%{αδιαφάνεια:1; -webkit-transform:κλίμακα(1); }
} @-o-keyframes ani-narrow{ 0%{αδιαφάνεια:1; -o-transform:κλίμακα(1); } 5%{αδιαφάνεια:1; -o-transform:κλίμακα(1); } 10%{αδιαφάνεια:0; -o-transform:κλίμακα(0); } 87%{αδιαφάνεια:0; -o-transform:κλίμακα(0); } 90%{αδιαφάνεια:1; -o-transform:κλίμακα(1); } 100%{αδιαφάνεια:1; -o-transform:κλίμακα(1); }
} .ani-ζουμ{ Κινούμενα σχέδια: ani-zoom 20s γραμμικό άπειρο. -webkit-animation: ani-zoom 20s linear infinite. -o-animation: ani-zoom 20s γραμμικό άπειρο.
} @keyframes ani-zoom{ 0%{αδιαφάνεια:0; μετασχηματισμός:κλίμακα(0); } 5%{αδιαφάνεια:0; μετασχηματισμός:κλίμακα(0); } 8%{αδιαφάνεια:1; μετασχηματισμός:κλίμακα(1); } 60%{αδιαφάνεια:1; μετασχηματισμός:κλίμακα(1); } 62%{αδιαφάνεια:0; μετασχηματισμός:κλίμακα(1.5); } 100%{αδιαφάνεια:0; μετασχηματισμός:κλίμακα(0); }
} @-webkit-keyframes ani-zoom{ 0%{αδιαφάνεια:0; -webkit-transform:κλίμακα(0); } 5%{αδιαφάνεια:0; -webkit-transform:κλίμακα(0); } 8%{αδιαφάνεια:1; -webkit-transform:κλίμακα(1); } 60%{αδιαφάνεια:1; -webkit-transform:κλίμακα(1); } 62%{αδιαφάνεια:0; -webkit-transform:κλίμακα (1.5); } 100%{αδιαφάνεια:0; -webkit-transform:κλίμακα(0); }
} @-o-keyframes ani-zoom{ 0%{αδιαφάνεια:0; -o-transform:κλίμακα(0); } 5%{αδιαφάνεια:0; -o-transform:κλίμακα(0); } 8%{αδιαφάνεια:1; -o-transform:κλίμακα(1); } 60%{αδιαφάνεια:1; -o-transform:κλίμακα(1); } 62%{αδιαφάνεια:0; -o-transform:κλίμακα(1.5); } 100%{αδιαφάνεια:0; -o-transform:κλίμακα(0); }
} .ani-rotateHook{ κινούμενα σχέδια: ani-rotateHook 20s ευκολία άπειρη. -webkit-animation:ani-rotateHook 20s ease-in άπειρο; -o-animation: ani-rotateHook 20s ευκολία άπειρο.
} @keyframes ani-rotateHook{ 0%{αδιαφάνεια:0; μετασχηματισμός:κλίμακα(0) περιστροφή(0); } 9%{αδιαφάνεια:0; μετασχηματισμός:κλίμακα(0) περιστροφή(0); } 13%{αδιαφάνεια:1; μετασχηματισμός: κλίμακα(1) περιστροφή (-360 μοίρες); } 35%{αδιαφάνεια:1; μετασχηματισμός: κλίμακα(1) περιστροφή (-360 μοίρες); } 38%{αδιαφάνεια:0; μετασχηματισμός: κλίμακα (1,8) περιστροφή (-540 μοίρες); } 100%{αδιαφάνεια:0; μετασχηματισμός:κλίμακα(0) περιστροφή(0); }
} @-webkit-keyframes ani-rotateHook{ 0%{αδιαφάνεια:0; -webkit-transform:κλίμακα(0) περιστροφή(0); } 9%{αδιαφάνεια:0; -webkit-transform:κλίμακα(0) περιστροφή(0); } 13%{αδιαφάνεια:1; -webkit-transform:κλίμακα(1) περιστροφή (-360 μοίρες); } 35%{αδιαφάνεια:1; -webkit-transform:κλίμακα(1) περιστροφή (-360 μοίρες); } 38%{αδιαφάνεια:0; -webkit-transform: κλίμακα (1.8) περιστροφή (-540 μοίρες); } 100%{αδιαφάνεια:0; -webkit-transform:κλίμακα(0) περιστροφή(0); }
} @-o-keyframes ani-rotateHook{ 0%{αδιαφάνεια:0; -o-transform:κλίμακα(0) περιστροφή(0); } 9%{αδιαφάνεια:0; -o-transform:κλίμακα(0) περιστροφή(0); } 13%{αδιαφάνεια:1; -o-transform: κλίμακα(1) περιστροφή (-360 μοίρες); } 35%{αδιαφάνεια:1; -o-transform: κλίμακα(1) περιστροφή (-360 μοίρες); } 38%{αδιαφάνεια:0; -o-transform: κλίμακα (1.8) περιστροφή (-540 μοίρες); } 100%{αδιαφάνεια:0; -o-transform:κλίμακα(0) περιστροφή(0); }
} .ani-rotateTube{ κινούμενα σχέδια:ani-rotateTube 20s ευκολία μέσα-έξω άπειρο; -webkit-animation:ani-rotateTube 20s ευκολία μέσα-έξω άπειρο; -o-animation:ani-rotateTube 20s ευκολία μέσα-έξω άπειρο;
} @keyframes ani-rotateTube{ 0%{αδιαφάνεια:0; μετασχηματισμός:κλίμακα(0) περιστροφή(0); } 35%{αδιαφάνεια:0; μετασχηματισμός:κλίμακα(0) περιστροφή(0); } 40%{αδιαφάνεια:1; μετασχηματισμός: κλίμακα(1) περιστροφή (-360 μοίρες); } 60%{αδιαφάνεια:1; μετασχηματισμός: κλίμακα(1) περιστροφή (-360 μοίρες); } 100%{αδιαφάνεια:1; μετασχηματισμός: κλίμακα(1) περιστροφή (-360 μοίρες); }
} @-webkit-keyframes ani-rotateTube{ 0%{αδιαφάνεια:0; -webkit-transform:κλίμακα(0) περιστροφή(0); } 35%{αδιαφάνεια:0; -webkit-transform:κλίμακα(0) περιστροφή(0); } 40%{αδιαφάνεια:1; -webkit-transform:κλίμακα(1) περιστροφή (-360 μοίρες); } 60%{αδιαφάνεια:1; -webkit-transform:κλίμακα(1) περιστροφή (-360 μοίρες); } 100%{αδιαφάνεια:1; -webkit-transform:κλίμακα(1) περιστροφή (-360 μοίρες); }
} @-o-keyframes ani-rotateTube{ 0%{αδιαφάνεια:0; -o-transform:κλίμακα(0) περιστροφή(0); } 35%{αδιαφάνεια:0; -o-transform:κλίμακα(0) περιστροφή(0); } 40%{αδιαφάνεια:1; -o-transform: κλίμακα(1) περιστροφή (-360 μοίρες); } 60%{αδιαφάνεια:1; -o-transform: κλίμακα(1) περιστροφή (-360 μοίρες); } 100%{αδιαφάνεια:1; -o-transform: κλίμακα(1) περιστροφή (-360 μοίρες); }
} .ani-σκιά{ κινούμενα σχέδια: ani-shadow 20s linear infinite; -webkit-animation:ani-shadow 20s linear άπειρο; -o-animation: ani-shadow 20s γραμμικό άπειρο.
} @keyframes ani-shadow{ 0%{αδιαφάνεια:0; box-shadow: καμία; } 58%{αδιαφάνεια:0; box-shadow: καμία; } 64%{αδιαφάνεια:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; } 87%{αδιαφάνεια:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; } 90%{αδιαφάνεια:0; box-shadow: καμία; } 100%{αδιαφάνεια:0; box-shadow: καμία; }
} @-webkit-keyframes ani-shadow{ 0%{αδιαφάνεια:0; box-shadow: καμία; } 58%{αδιαφάνεια:0; box-shadow: καμία; } 64%{αδιαφάνεια:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; } 87%{αδιαφάνεια:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; } 90%{αδιαφάνεια:0; box-shadow: καμία; } 100%{αδιαφάνεια:0; box-shadow: καμία; }
} @-o-keyframes ani-shadow{ 0%{αδιαφάνεια:0; box-shadow: καμία; } 58%{αδιαφάνεια:0; box-shadow: καμία; } 64%{αδιαφάνεια:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; } 87%{αδιαφάνεια:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; } 90%{αδιαφάνεια:0; box-shadow: καμία; } 100%{αδιαφάνεια:0; box-shadow: καμία; }
} .ani-στενό,.ani-ζουμ,.ani-περιστροφήΆγκιστρο, .ani-rotateTube,.ani-shadow,.eyes .line:after{ λειτουργία πλήρωσης κινούμενων εικόνων: προς τα εμπρός; -webkit-animation-fill-mode:και τα δύο; -o-animation-fill-mode:και τα δύο;
} </style> </head>
<body> <div class="container"> <!-- αριστερό μάτι αρχίζει - > <div class="eyesBoxs pullLeft"> <div class="προφίλ λοξόΑριστερά"></div> <div class="shadow skewLeft"></div> <div class="βασικό ani-narrow"></div> <div class="μάτια ani-zoom"> <div class="γραμμή"> <div class="άγκιστρο ani-rotateHook"> <span class="bar"><b></b></span> <span class="bar"><b></b></span> <span class="bar"><b></b></span> </div> <div class="σωλήνας ani-rotateTube"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div> </div> </div> <div class="trans skewLeft"> <span class="bar ani-shadow"></span> </div> </div> <!-- άκρο του αριστερού ματιού - > <!-- αρχίζει το δεξί μάτι - > <div class="eyesBoxs pullRight"> <div class="προφίλ skewRight"></div> <div class="shadow skewRight"></div> <div class="βασικό ani-narrow"></div> <div class="μάτια ani-zoom"> <div class="γραμμή"> <div class="άγκιστρο ani-rotateHook"> <span class="bar"><b></b></span> <span class="bar"><b></b></span> <span class="bar"><b></b></span> </div> <div class="σωλήνας ani-rotateTube"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div> </div> </div> <div class="trans skewRight"> <span class="bar ani-shadow"></span> </div> </div> <!-- άκρα του δεξιού ματιού - > </div> </body> </html>[/mw_shl_code]
|