CSS3:n tekeminen Sharingan (animaatio)

Vertaansa vailla maailmassa · Julkaistu 14.11.2014 17.55.02

[mw_shl_code=css,totta] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; täyte: 0; }
.container{ width:750px; korkeus: 200px; marginaali: 30px automaatti; ylivuoto: piilotettu; tausta:#000; sijainti: suhteellinen; }
.eyesBoxs{width:130px; korkeus: 70px; asema: absoluuttinen; yläosa: 50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
      leveys: 130px;
      korkeus: 70px;
      Taustaa:#fff;
      asema: absoluuttinen;
      top:0;
      vasen: 0;
      ylivuoto: piilotettu;
      rajasäde: 0 70px 0 50px;
}
.shadow{
      display:block;
      leveys: 130px;
      korkeus: 70px;
      asema: absoluuttinen;
      top:0;
      z-indeksi:5;
      rajasäde: 0 90px 0 60px;
      box-shadow:5px 12px 2px 5px RGBA(0,0,0,.25) inset;
}
.skewLeft{
      transform:skewX(15°);
      -webkit-transform:skewX(15°);
      -o-transform:skewX(15°);
}
.skewRight{
      transform:skewX(-15°) scale(-1,1);
      -webkit-transform:skewX(-15deg) scale(-1,1);
      -o-muunnos:skewX(-15deg) scale(-1,1);
}
.basic{
      leveys:60px;
      korkeus: 60px;
      tausta:#000;
      asema: absoluuttinen;
      yläosa:50%;
      vasen: 50 %;
      z-indeksi:10;
      marginaali-huippu:-30px;
      rajasäde: 60 %;
}
.basic:before{
      content:"";
      display:block;
      leveys: 10px;
      korkeus: 11px;
      asema: absoluuttinen;
      vasen: 15px;
      top:15px;
      z-indeksi:100;
      rajasäde: 60 %;
      taustakuva:Radial-gradientti(ympyrä, RGB(225,225,225),RGB(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
      -webkit-tausta-kuva:radial-gradientti(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
      -o-taustakuva:radiaali-gradientti(ympyrä,RGB(225,225,225),RGB(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
}
.pullLeft .basic{
      marginaali vasemmalla:-33px;
}
.pullRight .basic{
      marginaali vasemmalla: -27px;
}
.eyes{
      leveys: 55px;
      korkeus: 55px;
      Taustaa:#ff0000;
      asema: absoluuttinen;
      top:8px;
      rajasäde: 60 %;
      box-shadow:0 0 2px 4px #bd0000 upotettu, 0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
      leveys:64%;
      pituus:64%;
      Taustaa:#ff0000;
      asema: absoluuttinen;
      right:0;
      vasen: 0;
      top:10px;
      marginaali: 0 automaatti;
      rajasäde: 60 %;
      box-shadow:0 0 2px 0 #b20000 upotettu;
}
.eyes .line:before{
      content:"";
      display:block;
      leveys: 10px;
      korkeus: 11px;
      asema: absoluuttinen;
      vasen: 3px;
      top:4px;
      z-indeksi:100;
      rajasäde: 60 %;
      Taustakuva:Radial-gradientti(ympyrä, RGB(225,225,225),RGB(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
      -webkit-tausta-kuva:radial-gradientti(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
      -o-taustakuva:radiaaligradientti(ympyrä,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;
      leveys: 10px;
      korkeus: 10px;
      asema: absoluuttinen;
      tausta:#000;
      right:0;
      vasemmalla:-1px;
      top:13px;
      z-indeksi:100;
      marginaali: 0 automaatti;
      rajasäde: 60 %;
      transform:rotate(150°);
      -webkit-transform:rotate(150°);
      -o-muunnos:pyöri(150°);
      animaatio: colour 20s ease-in infinite;
      -webkit-animation:colour 20s ease-in infinite;
      -o-animaatio:colour 20s ease-in infinite;
}
@keyframes väri{
      0%{tausta:#000; }
      35%{tausta:#000; }
      40%{tausta:#f00; }
      100%{tausta:#f00; }
}
@-webkit-keyframes colour{
      0%{tausta:#000; }
      35%{tausta:#000; }
      40%{tausta:#f00; }
      100%{tausta:#f00; }
}
@-o-keyframes colour{
      0%{tausta:#000; }
      35%{tausta:#000; }
      40%{tausta:#f00; }
      100%{tausta:#f00; }
}
/*******三勾玉开始*******/
.hook{
      leveys: 92%;
      pituus:92%;
      asema: absoluuttinen;
      right:0;
      vasen: 0;
      yläosa:5%;
      marginaali: 0 automaatti;
      rajasäde: 60 %;
}
.hook .bar{
      display:block;
      leveys: 100%;
      pituus: 100%;
      asema: absoluuttinen;
      vasen: 0;
      top:0;
      rajasäde: 60 %;
}
.hook .bar b{
      display:block;
      leveys:8px;
      pituus:8px;
      tausta:#000;
      asema: absoluuttinen;
      vasen: 0;
      bottom:0;
      rajasäde: 60 %;
}
.hook .bar b:after{
      content:"";
      leveys:8px;
      pituus:8px;
      border-color:läpinäkyvä #000 läpinäkyvä;
      reuna-tyyli: kiinteä;
      reunaleveys: 0 0 5px 0;
      asema: absoluuttinen;
      yläosa:-1px;
      vasemmalla:-3px;
      z-indeksi:100;
      rajasäde: 0 0 0 70 %;
      transform:rotate(-75°);
      -webkit-transform:rotate(-75°C);
      -o-muunnos:pyöri(-75°);
}
.hook .bar:nth-child(1){
      transform:rotate(10°);
      -webkit-transform:rotate(10°);
      -o-muunnos:pyöri(10 astetta);
}
.hook .bar:nth-child(2){
      transform:rotate(130°);
      -webkit-transform:rotate(130°);
      -o-muunnos:pyöri(130°);
}
.hook .bar:nth-child(3){
      transform:rotate(250°);
      -webkit-transform:rotate(250°);
      -o-muunnos:pyöri (250 astetta);
}
/*******三勾玉结束*******/
/*******万花筒开始*******/
.tube{
      leveys:93%;
      pituus: 93%;
      asema: absoluuttinen;
      right:0;
      vasen: 0px;
      top:2px;
      marginaali: 0 automaatti;
      tausta:#000;
      rajasäde: 60 %;
}
.tube .bar{
      display:block;
      leveys: 10px;
      korkeus: 20px;
      reuna-tyyli: kiinteä;
      reunaleveys: 0 0 0 10px;
      reunaväri:läpinäkyvä, läpinäkyvä, läpinäkyvä musta;
      asema: absoluuttinen;
      rajasäde: 100 % 0 0 0;
}
.tube .bar:nth-child(1){
      yläosa:-10px;
      vasen: 2px;
      transform:rotate(-10°);
}
.tube .bar:nth-child(2){
      bottom:0px;
      oikealla:-10px;
      transform:rotate(105°);
      -webkit-transform:rotate(105°);
      -o-muunnos:pyöri(105°);
}
.tube .bar:nth-child(3){
      ala:-3px;
      vasen: -10px;
      transform:rotate(235°);
      -webkit-transform:rotate(235°);
      -o-muunnos:pyöri(235 astetta);
}
/*******万花筒结束*******/
/*******轮回眼开始*******/
.trans{
      leveys: 130px;
      korkeus: 70px;
      asema: absoluuttinen;
      ylivuoto: piilotettu;
      top:0;
      vasen: 0;
      rajasäde: 0 70px 0 50px;
}
.trans .bar{
      display:block;
      leveys: 9px;
      korkeus: 9px;
      tausta:#000;
      asema: absoluuttinen;
      yläosa:50%;
      z-indeksi:2;
      marginaali:-4px 0 0 -4px;
      rajasäde: 60 %;
}
.trans .bar:after{
      content:"";
      display:block;
      leveys: 11px;
      korkeus: 12 pikseliä;
      asema: absoluuttinen;
      yläosa:-13px;
      vasen: -13px;
      z-indeksi:100;
      rajasäde: 60 %;
      tausta: rgba(250,250,250,.85);
}
.pullLeft .trans .bar{
      transform:skewX(-15°);
      -webkit-transform:skewX(-15deg);
      -o-transform:skewX(-15°);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
      transform:skewX(-15°) scale(-1,1);
      -webkit-transform:skewX(-15deg) scale(-1,1);
      -o-muunnos:skewX(-15deg) scale(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼结束*******/
.ani-kapea{
      Animaatio: Ani-kapea 20-luvun helpotus loputon;
      -webkit-animation:ani-kapea 20-luvun ease-out infinite;
      -o-animaatio:ani-kapea 20-luvun 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-muunnos:scale(1); }
      5%{opacity:1; -o-muunnos:scale(1); }
      10%{opacity:0; -o-muunnos:scale(0); }
      87%{opacity:0; -o-muunnos:scale(0); }
      90%{opacity:1; -o-muunnos:scale(1); }
      100%{opacity:1; -o-muunnos:scale(1); }
}
.ani-zoom{
      animaatio: ani-zoom 20s lineaarinen äärettömyys;
      -webkit-animation:ani-zoom 20s lineaarinen ääretön;
      -o-animaatio:ani-zoom 20s lineaarinen ääretön;
}
@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-muunnos:scale(0); }
      5%{opacity:0; -o-muunnos:scale(0); }
      8%{opacity:1; -o-muunnos:scale(1); }
      60%{opacity:1; -o-muunnos:scale(1); }
      62%{opacity:0; -o-muunnos:scale(1.5); }
      100%{opacity:0; -o-muunnos:scale(0); }
}
.ani-rotateHook{
      animaatio:ani-rotateHook 20s ease-in infinite;
      -webkit-animation:ani-rotateHook 20s ease-in ääretön;
      -o-animation:ani-rotateHook 20s ease-in ääretön;
}
@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(-360°); }
      35%{opacity:1; transform:scale(1) rotate(-360°); }
      38%{opacity:0; transform:scale(1,8) rotate(-540°); }
      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(-540°C); }
      100%{opacity:0; -webkit-transform:scale(0) rotate(0); }
}
@-o-keyframes ani-rotateHook{
      0%{opacity:0; -o-muunnos:scale(0) rotate(0); }
      9%{opacity:0; -o-muunnos:scale(0) rotate(0); }
      13%{opacity:1; -o-muunnos:scale(1) rotate(-360°); }
      35%{opacity:1; -o-muunnos:scale(1) rotate(-360°); }
      38%{opacity:0; -o-muunnos:skaala(1,8) kierto(-540°); }
      100%{opacity:0; -o-muunnos:scale(0) rotate(0); }
}
.ani-rotateTube{
      animaatio:ani-rotateTube 20s ease-in-out ääretön;
      -webkit-animation:ani-rotateTube 20s ease-in-out infinite;
      -o-animation:ani-rotateTube 20s ease-in-out ääretön;
}
@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(-360°); }
      60%{opacity:1; transform:scale(1) rotate(-360°); }
      100%{opacity:1; transform:scale(1) rotate(-360°); }
}
@-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-muunnos:scale(0) rotate(0); }
      35%{opacity:0; -o-muunnos:scale(0) rotate(0); }
      40%{opacity:1; -o-muunnos:scale(1) rotate(-360°); }
      60%{opacity:1; -o-muunnos:scale(1) rotate(-360°); }
      100%{opacity:1; -o-muunnos:scale(1) rotate(-360°); }
}
.ani-varjo{
      animaatio: ani-shadow 20s lineaarinen äärettömyys;
      -webkit-animation:ani-shadow 20s lineaarinen ääretön;
      -o-animaatio:ani-shadow 20s lineaarinen ääretön;
}
@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 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 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 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 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 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 44px #a6a6a6,0 0 0 46px #000; }
      90%{opacity:0; box-shadow:none; }
      100%{opacity:0; box-shadow:none; }
}
.ani-kapea,.ani-zoomaa,.ani-pyöritäHook,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
      animaatio-täyttötila:eteenpäin;
      -webkit-animation-fill-mode:molemmat;
      -o-animaatio-täyttötila:molemmat;
}
</style>
</head>

<body>
<div class="container">
      <!-- vasen silmä alkaa - >
<div class="eyesBoxs pullLeft">
            <div class="profile skewLeft"></div>
      <div class="shadow skewLeft"></div>
      <div class="basic ani-kapea"></div>
      <div class="eyes ani-zoom">
         <div class="line">
            <div class="hook ani-rotateHook">
                     <span class="bar"><b></b></span>
                  <span class="bar"><b></b></span>
                  <span class="bar"><b></b></span>
            </div>
            <div class="putki 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>
      <!-- vasemman silmän päässä - >
<!-- oikea silmä alkaa – >
<div class="eyesBoxs pullRight">
            <div class="profile skewRight"></div>
      <div class="shadow skewRight"></div>
      <div class="basic ani-kapea"></div>
      <div class="eyes ani-zoom">
         <div class="line">
            <div class="hook ani-rotateHook">
                     <span class="bar"><b></b></span>
                  <span class="bar"><b></b></span>
                  <span class="bar"><b></b></span>
            </div>
            <div class="putki 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>
      <!-- oikean silmän päät - >
</div>
</body>
[/</html>mw_shl_code]

Vertaansa vailla maailmassa · Julkaistu 14.11.2014 17.57.04

Tätä julkaisua on viimeksi muokannut Tianxia Wushuang 14.11.2014 klo 18:00

Admin · Julkaistu 14.11.2014 17.58.15

Hyviä asioita, jotka keräsin ensimmäisinä

Pohjoisen kaupungin lämpötila on 22 astetta · Julkaistu 14.11.2014 21.53.23

Niin paljon koodia yhdelle silmälle?

Vertaansa vailla maailmassa · Julkaistu 14.11.2014 22.12.26

Beicheng Weaving Lämpötila 22 astetta Julkaistu 2014-11-14 21:53
Niin paljon koodia yhdelle silmälle?

Se ei ole pelkkä silmä! Jos ajat sen kerran verkossa, tiedät kyllä

Mustavatsaluumu · Julkaistu 14.11.2014 22.23.43

Se on uskomatonta, ja mukana on myös jälleensyntymän silmä

[CSS/DIV] CSS3:n tekeminen Sharingan (animaatio)

Pistetilanne

Katsotut osuudet