写輪眼の開眼と進化過程の純粋CSS3制作 [transfer]_html/css_WEB-ITnose

現在テストされており、IE10、Firefox ブラウザ、Chrome ブラウザ、Opera ブラウザ、および 360 ブラウザ (2 つのモード) との互換性は合格しています。

注意: 上記のブラウザのバージョン番号はすべて最新のものです。アニメーション プロセスの各段階は約 5 秒間継続します。錯覚しないように願っています ^_^。

オンラインデモのソースコードダウンロード

ネチズンの提案に従って、エフェクトをループ可能にするために時間を再計算しました。各ステージは以前と同じです。約5秒間。

HTML コード:

 1 <div class="container"> 2     <!--左眼开始--> 3     <div class="eyesBoxs pullLeft"> 4         <div class="profile skewLeft"></div> 5         <div class="shadow skewLeft"></div> 6         <div class="basic ani-narrow"></div> 7         <div class="eyes ani-zoom"> 8             <div class="line">            9                 <div class="hook ani-rotateHook">10                     <span class="bar"><b></b></span>11                     <span class="bar"><b></b></span>12                     <span class="bar"><b></b></span>13                 </div>14                 <div class="tube ani-rotateTube">15                     <span class="bar"></span>16                     <span class="bar"></span>17                     <span class="bar"></span>18                 </div>19             </div>20         </div>21         <div class="trans skewLeft">22             <span class="bar ani-shadow"></span>23         </div>24     </div>25     <!--左眼结束-->27     <!--右眼开始-->28     <div class="eyesBoxs pullRight">29         <div class="profile skewRight"></div>30         <div class="shadow skewRight"></div>31         <div class="basic ani-narrow"></div>32         <div class="eyes ani-zoom">33             <div class="line">           34                 <div class="hook ani-rotateHook">35                     <span class="bar"><b></b></span>36                     <span class="bar"><b></b></span>37                     <span class="bar"><b></b></span>38                 </div>39                 <div class="tube ani-rotateTube">40                     <span class="bar"></span>41                     <span class="bar"></span>42                     <span class="bar"></span>43                 </div>44             </div>45         </div>46         <div class="trans skewRight">47             <span class="bar ani-shadow"></span>48         </div>49     </div>50     <!--右眼结束-->51 </div>

*{margin:0;padding:0;}.container{ width:750px; height:200px; margin:30px auto;overflow:hidden; background:#000; position:relative;}.eyesBoxs{width:130px;height:70px;position:absolute;top:50px;}.pullLeft{left:100px;}.pullRight{right:100px;}.profile{    width:130px;    height:70px;    background:#fff;    position:absolute;    top:0;    left:0;    overflow:hidden;    border-radius:0 70px 0 50px;}.shadow{    display:block;    width:130px;    height:70px;    position:absolute;    top:0;    z-index:5;    border-radius:0 90px 0 60px;    box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) inset;}.skewLeft{    transform:skewX(15deg);    -webkit-transform:skewX(15deg);    -o-transform:skewX(15deg);}.skewRight{    transform:skewX(-15deg) scale(-1,1);    -webkit-transform:skewX(-15deg) scale(-1,1);    -o-transform:skewX(-15deg) scale(-1,1);}.basic{    width:60px;    height:60px;    background:#000;    position:absolute;    top:50%;    left:50%;    z-index:10;    margin-top:-30px;    border-radius:60%;}.basic:before{    content:"";    display:block;    width:10px;    height:11px;    position:absolute;    left:15px;    top:15px;    z-index:100;    border-radius:60%;    background-image:radial-gradient(circle,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(circle,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(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));}.pullLeft .basic{    margin-left:-33px;}.pullRight .basic{    margin-left:-27px;}.eyes{    width:55px;    height:55px;    background:#ff0000;    position:absolute;    top:8px;    border-radius:60%;    box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000;}.pullLeft .eyes{left:35px;}.pullRight .eyes{right:35px;}.eyes .line{    width:64%;    height:64%;    background:#ff0000;    position:absolute;    right:0;    left:0;    top:10px;    margin:0 auto;    border-radius:60%;    box-shadow:0 0 2px 0 #b20000 inset;}.eyes .line:before{    content:"";    display:block;    width:10px;    height:11px;    position:absolute;    left:3px;    top:4px;    z-index:100;    border-radius:60%;    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));    -webkit-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));    -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{    content:"";    display:block;    width:10px;    height:10px;    position:absolute;    background:#000;    right:0;    left:-1px;    top:13px;    z-index:100;    margin:0 auto;    border-radius:60%;    transform:rotate(150deg);    -webkit-transform:rotate(150deg);    -o-transform:rotate(150deg);    animation:colour 20s ease-in infinite;    -webkit-animation:colour 20s ease-in infinite;    -o-animation:colour 20s ease-in infinite;}@keyframes colour{    0%{background:#000;}    35%{background:#000;}    40%{background:#f00;}    100%{background:#f00;}}@-webkit-keyframes colour{    0%{background:#000;}    35%{background:#000;}    40%{background:#f00;}    100%{background:#f00;}}@-o-keyframes colour{    0%{background:#000;}    35%{background:#000;}    40%{background:#f00;}    100%{background:#f00;}}/*******三勾玉 开始*******/.hook{    width:92%;    height:92%;    position:absolute;    right:0;    left:0;    top:5%;    margin:0 auto;    border-radius:60%;}.hook .bar{    display:block;    width:100%;    height:100%;    position:absolute;    left:0;    top:0;    border-radius:60%;}.hook .bar b{    display:block;    width:8px;    height:8px;    background:#000;    position:absolute;    left:0;    bottom:0;    border-radius:60%;}.hook .bar b:after{    content:"";    width:8px;    height:8px;    border-color:transparent transparent #000 transparent;    border-style:solid;    border-width:0 0 5px 0;    position:absolute;    top:-1px;    left:-3px;    z-index:100;    border-radius:0 0 0 70%;    transform:rotate(-75deg);    -webkit-transform:rotate(-75deg);    -o-transform:rotate(-75deg);}.hook .bar:nth-child(1){    transform:rotate(10deg);    -webkit-transform:rotate(10deg);    -o-transform:rotate(10deg);}.hook .bar:nth-child(2){    transform:rotate(130deg);    -webkit-transform:rotate(130deg);    -o-transform:rotate(130deg);}.hook .bar:nth-child(3){    transform:rotate(250deg);    -webkit-transform:rotate(250deg);    -o-transform:rotate(250deg);}/*******三勾玉 结束*******//*******万花筒 开始*******/.tube{    width:93%;    height:93%;    position:absolute;    right:0;    left:0px;    top:2px;    margin:0 auto;    background:#000;    border-radius:60%;}.tube .bar{    display:block;    width:10px;    height:20px;    border-style:solid;    border-width:0 0 0 10px;    border-color:transparent transparent transparent black;    position:absolute;    border-radius:100% 0 0 0;}.tube .bar:nth-child(1){    top:-10px;    left:2px;    transform:rotate(-10deg);}.tube .bar:nth-child(2){    bottom:0px;    right:-10px;    transform:rotate(105deg);    -webkit-transform:rotate(105deg);    -o-transform:rotate(105deg);}.tube .bar:nth-child(3){    bottom:-3px;    left:-10px;    transform:rotate(235deg);    -webkit-transform:rotate(235deg);    -o-transform:rotate(235deg);}/*******万花筒 结束*******//*******轮回眼 开始*******/.trans{    width:130px;    height:70px;    position:absolute;    overflow:hidden;    top:0;    left:0;    border-radius:0 70px 0 50px;}.trans .bar{    display:block;    width:9px;    height:9px;    background:#000;    position:absolute;    top:50%;    z-index:2;    margin:-4px 0 0 -4px;    border-radius:60%;}.trans .bar:after{        content:"";    display:block;    width:11px;    height:12px;    position:absolute;    top:-13px;    left:-13px;    z-index:100;    border-radius:60%;    background:rgba(250,250,250,.85);}.pullLeft .trans .bar{    transform:skewX(-15deg);    -webkit-transform:skewX(-15deg);    -o-transform:skewX(-15deg);}.pullLeft .trans .bar{left:48%;}.pullRight .trans .bar{    transform:skewX(-15deg) scale(-1,1);    -webkit-transform:skewX(-15deg) scale(-1,1);    -o-transform:skewX(-15deg) scale(-1,1);}.pullRight .trans .bar{right:48%;}/*******轮回眼 结束*******/.ani-narrow{    animation:ani-narrow 20s ease-out infinite;    -webkit-animation:ani-narrow 20s ease-out infinite;    -o-animation:ani-narrow 20s ease-out infinite;}@keyframes ani-narrow{    0%{opacity:1;transform:scale(1);}    5%{opacity:1;transform:scale(1);}    10%{opacity:0;transform:scale(0);}    87%{opacity:0;transform:scale(0);}    90%{opacity:1;transform:scale(1);}    100%{opacity:1;transform:scale(1);}}@-webkit-keyframes ani-narrow{    0%{opacity:1;-webkit-transform:scale(1);}    5%{opacity:1;-webkit-transform:scale(1);}    10%{opacity:0;-webkit-transform:scale(0);}    87%{opacity:0;-webkit-transform:scale(0);}    90%{opacity:1;-webkit-transform:scale(1);}    100%{opacity:1;-webkit-transform:scale(1);}}@-o-keyframes ani-narrow{    0%{opacity:1;-o-transform:scale(1);}    5%{opacity:1;-o-transform:scale(1);}    10%{opacity:0;-o-transform:scale(0);}    87%{opacity:0;-o-transform:scale(0);}    90%{opacity:1;-o-transform:scale(1);}    100%{opacity:1;-o-transform:scale(1);}}.ani-zoom{    animation:ani-zoom 20s linear infinite;    -webkit-animation:ani-zoom 20s linear infinite;    -o-animation:ani-zoom 20s linear infinite;}@keyframes ani-zoom{    0%{opacity:0;transform:scale(0);}    5%{opacity:0;transform:scale(0);}    8%{opacity:1;transform:scale(1);}    60%{opacity:1;transform:scale(1);}    62%{opacity:0;transform:scale(1.5);}    100%{opacity:0;transform:scale(0);}}@-webkit-keyframes ani-zoom{    0%{opacity:0;-webkit-transform:scale(0);}    5%{opacity:0;-webkit-transform:scale(0);}    8%{opacity:1;-webkit-transform:scale(1);}    60%{opacity:1;-webkit-transform:scale(1);}    62%{opacity:0;-webkit-transform:scale(1.5);}    100%{opacity:0;-webkit-transform:scale(0);}}@-o-keyframes ani-zoom{    0%{opacity:0;-o-transform:scale(0);}    5%{opacity:0;-o-transform:scale(0);}    8%{opacity:1;-o-transform:scale(1);}    60%{opacity:1;-o-transform:scale(1);}    62%{opacity:0;-o-transform:scale(1.5);}    100%{opacity:0;-o-transform:scale(0);}}.ani-rotateHook{    animation:ani-rotateHook 20s ease-in infinite;    -webkit-animation:ani-rotateHook 20s ease-in infinite;    -o-animation:ani-rotateHook 20s ease-in infinite;}@keyframes ani-rotateHook{    0%{opacity:0;transform:scale(0) rotate(0);}    9%{opacity:0;transform:scale(0) rotate(0);}    13%{opacity:1;transform:scale(1) rotate(-360deg);}    35%{opacity:1;transform:scale(1) rotate(-360deg);}    38%{opacity:0;transform:scale(1.8) rotate(-540deg);}    100%{opacity:0;transform:scale(0) rotate(0);}}@-webkit-keyframes ani-rotateHook{    0%{opacity:0;-webkit-transform:scale(0) rotate(0);}    9%{opacity:0;-webkit-transform:scale(0) rotate(0);}    13%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}    35%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}    38%{opacity:0;-webkit-transform:scale(1.8) rotate(-540deg);}    100%{opacity:0;-webkit-transform:scale(0) rotate(0);}}@-o-keyframes ani-rotateHook{    0%{opacity:0;-o-transform:scale(0) rotate(0);}    9%{opacity:0;-o-transform:scale(0) rotate(0);}    13%{opacity:1;-o-transform:scale(1) rotate(-360deg);}    35%{opacity:1;-o-transform:scale(1) rotate(-360deg);}    38%{opacity:0;-o-transform:scale(1.8) rotate(-540deg);}    100%{opacity:0;-o-transform:scale(0) rotate(0);}}.ani-rotateTube{    animation:ani-rotateTube 20s ease-in-out infinite;    -webkit-animation:ani-rotateTube 20s ease-in-out infinite;    -o-animation:ani-rotateTube 20s ease-in-out infinite;}@keyframes ani-rotateTube{    0%{opacity:0;transform:scale(0) rotate(0);}    35%{opacity:0;transform:scale(0) rotate(0);}    40%{opacity:1;transform:scale(1) rotate(-360deg);}    60%{opacity:1;transform:scale(1) rotate(-360deg);}    100%{opacity:1;transform:scale(1) rotate(-360deg);}}@-webkit-keyframes ani-rotateTube{    0%{opacity:0;-webkit-transform:scale(0) rotate(0);}    35%{opacity:0;-webkit-transform:scale(0) rotate(0);}    40%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}    60%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}    100%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}}@-o-keyframes ani-rotateTube{    0%{opacity:0;-o-transform:scale(0) rotate(0);}    35%{opacity:0;-o-transform:scale(0) rotate(0);}    40%{opacity:1;-o-transform:scale(1) rotate(-360deg);}    60%{opacity:1;-o-transform:scale(1) rotate(-360deg);}    100%{opacity:1;-o-transform:scale(1) rotate(-360deg);}}.ani-shadow{    animation:ani-shadow 20s linear infinite;    -webkit-animation:ani-shadow 20s linear infinite;    -o-animation:ani-shadow 20s linear infinite;}@keyframes ani-shadow{    0%{opacity:0;box-shadow:none;}    58%{opacity:0;box-shadow:none;}    64%{opacity: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%{opacity: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%{opacity:0;box-shadow:none;}    100%{opacity:0;box-shadow:none;}}@-webkit-keyframes ani-shadow{    0%{opacity:0;box-shadow:none;}    58%{opacity:0;box-shadow:none;}    64%{opacity: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%{opacity: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%{opacity:0;box-shadow:none;}    100%{opacity:0;box-shadow:none;}}@-o-keyframes ani-shadow{    0%{opacity:0;box-shadow:none;}    58%{opacity:0;box-shadow:none;}    64%{opacity: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%{opacity: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%{opacity:0;box-shadow:none;}    100%{opacity:0;box-shadow:none;}}.ani-narrow,.ani-zoom,.ani-rotateHook,.ani-rotateTube,.ani-shadow,.eyes .line:after{    animation-fill-mode:forwards;    -webkit-animation-fill-mode:both;    -o-animation-fill-mode:both;}

転載元アドレス: http://www.cnblogs.com/flylee90/archive/2014/11/10/40861 2.html