CSS3 Izdelava Sharingana (animacija)

Neprimerljiv na svetu · Objavljeno na 14. 11. 2014 17:55:02

[mw_shl_code=css,true] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; polnilo:0; }
.container{ width:750px; višina: 200px; Rob: 30px auto; preliv: skrit; ozadje: #000; položaj: relativno; }
.eyesBoxs{width:130px; višina: 70px; položaj: absoluten; zgoraj: 50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
      širina: 130px;
      višina: 70px;
      ozadje: #fff;
      položaj: absoluten;
      top:0;
      levo:0;
      preliv: skrit;
      mejni radij: 0 70px 0 50px;
}
.shadow{
      display:block;
      širina: 130px;
      višina: 70px;
      položaj: absoluten;
      top:0;
      z-indeks:5;
      mejni radij: 0 90px 0 60px;
      box-shadow: 5px 12px 2px 5px rgba (0,0,0,.25) vstavljeno;
}
.skewLeft{
      transform:skewX(15 stopinj);
      -webkit-transform:skewX(15°);
      -o-transformacija:skewX(15°);
}
.skewRight{
      transform:skewX(-15°°) lestvica(-1,1);
      -webkit-transform:skewX(-15°°) lestvica(-1,1);
      -o-transformacija:skewX(-15°°) lestvica(-1,1);
}
.basic{
      širina: 60px;
      višina: 60px;
      ozadje: #000;
      položaj: absoluten;
      zgoraj: 50 %;
      levo: 50 %;
      z-indeks:10;
      margin-top:-30px;
      mejni radij: 60 %;
}
.basic:before{
      vsebina:"";
      display:block;
      širina: 10px;
      višina: 11px;
      položaj: absoluten;
      levo:15px;
      zgoraj: 15px;
      z-indeks:100;
      mejni radij: 60 %;
      ozadje-slika:radialni gradient (krog,rgb(225,225,225),RGB(225,225,225),RGBA (225,225,225,0,9),RGBA (225,225,225,0,3));
      -webkit-ozadje-slika:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba (225,225,225,0,9),rgba (225,225,225,0,3));
      -o-ozadje-slika:radialni gradient(krog,rgb(225,225,225),RGB(225,225,225),RGBA(225,225,225,0,9),RGBA (225,225,225,0,3));
}
.pullLeft .basic{
      Levo na robu:-33px;
}
.pullRight .basic{
      margin-left:-27px;
}
.eyes{
      širina: 55px;
      višina: 55px;
      ozadje: #ff0000;
      položaj: absoluten;
      zgoraj: 8px;
      mejni radij: 60 %;
      box-shadow:0 0 2px 4px #bd0000 vstavek,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
      širina: 64 %;
      višina: 64 %;
      ozadje: #ff0000;
      položaj: absoluten;
      desno:0;
      levo:0;
      zgoraj: 10px;
      Rob:0 avtomatsko;
      mejni radij: 60 %;
      box-shadow:0 0 2px 0 #b20000 vstavljeno;
}
.eyes .line:before{
      vsebina:"";
      display:block;
      širina: 10px;
      višina: 11px;
      položaj: absoluten;
      levo: 3px;
      zgoraj: 4px;
      z-indeks:100;
      mejni radij: 60 %;
      ozadje-slika:radialni gradient (krog,rgb(225,225,225),RGB(225,225,225),RGBA (225,225,225,0,7),RGBA (225,225,225,0,3));
      -webkit-ozadje-slika:radial-gradient(krog,rgb(225,225,225),RGB(225,225,225),RGBA(225,225,0,7),RGBA (225,225,225,0,3));
      -o-ozadje-slika: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{
      vsebina:"";
      display:block;
      širina: 10px;
      višina: 10px;
      položaj: absoluten;
      ozadje: #000;
      desno:0;
      levo:-1px;
      zgoraj: 13px;
      z-indeks:100;
      Rob:0 avtomatsko;
      mejni radij: 60 %;
      transform:rotacija (150°);
      -webkit-transform:rotate(150°F);
      -o-transformacija:rotacija (150°);
      animacija: Colour 20s ease-in infinite;
      -webkit-animacija: barvni 20s ease-in neskončno;
      -o-animacija:colour 20s ease-in infinite;
}
@keyframes barva{
      0%{background:#000; }
      35 % {ozadje:#000; }
      40%{ozadje:#f00; }
      100%{ozadje:#f00; }
}
@-webkit-keyframes color{
      0%{background:#000; }
      35 % {ozadje:#000; }
      40%{ozadje:#f00; }
      100%{ozadje:#f00; }
}
@-o-keyframes color{
      0%{background:#000; }
      35 % {ozadje:#000; }
      40%{ozadje:#f00; }
      100%{ozadje:#f00; }
}
/*******三勾玉开始*******/
.hook{
      širina: 92 %;
      višina: 92 %;
      položaj: absoluten;
      desno:0;
      levo:0;
      zgoraj: 5 %;
      Rob:0 avtomatsko;
      mejni radij: 60 %;
}
.hook .bar{
      display:block;
      širina: 100 %;
      višina: 100 %;
      položaj: absoluten;
      levo:0;
      top:0;
      mejni radij: 60 %;
}
.hook .bar b{
      display:block;
      širina: 8px;
      višina: 8px;
      ozadje: #000;
      položaj: absoluten;
      levo:0;
      dno:0;
      mejni radij: 60 %;
}
.hook .bar b:after{
      vsebina:"";
      širina: 8px;
      višina: 8px;
      barva roba: prosojna prosojna #000;
      obrobni slog: poln;
      širina roba:0 0 5px 0;
      položaj: absoluten;
      zgoraj: -1px;
      levo:-3px;
      z-indeks:100;
      mejni radij: 0 0 0 70 %;
      transformacija:rotacija (-75 stopinj);
      -webkit-transform:rotate(-75°F);
      -o-transformacija:rotacija (-75°);
}
.hook .bar:nth-child(1){
      transform:rotate (10°F);
      -webkit-transform:rotate(10°F);
      -o-transformacija:rotacija (10°);
}
.hook .bar:nth-child(2){
      transformacija:rotacija (130°);
      -webkit-transform:rotate(130°F);
      -o-transformacija:rotacija (130°);
}
.hook .bar:nth-child(3){
      transform:rotacija (250 stopinj);
      -webkit-transform:rotate(250°F);
      -o-transformacija:rotacija (250°);
}
/*******三勾玉结束*******/
/*******万花筒开始*******/
.tube{
      širina: 93 %;
      višina: 93 %;
      položaj: absoluten;
      desno:0;
      left:0px;
      zgoraj: 2px;
      Rob:0 avtomatsko;
      ozadje: #000;
      mejni radij: 60 %;
}
.tube .bar{
      display:block;
      širina: 10px;
      višina: 20px;
      obrobni slog: poln;
      širina roba:0 0 0 10px;
      Barva roba: prozorna, prozorna, prosojna črna;
      položaj: absoluten;
      mejni radij: 100% 0 0 0;
}
.tube .bar:nth-child(1){
      zgoraj: -10px;
      levo: 2px;
      transform:rotacija (-10°F);
}
.tube .bar:nth-child(2){
      spodaj:0px;
      desno:-10px;
      transform: rotacija (105 stopinj);
      -webkit-transform:rotate(105°F);
      -o-transformacija:rotacija (105°);
}
.tube .bar:nth-child(3){
      spodaj: -3px;
      levo:-10px;
      transformacija:rotacija (235 stopinj);
      -webkit-transform:rotate(235°F);
      -o-transformacija:rotacija (235°);
}
/*******万花筒结束*******/
/*******轮回眼开始*******/
.trans{
      širina: 130px;
      višina: 70px;
      položaj: absoluten;
      preliv: skrit;
      top:0;
      levo:0;
      mejni radij: 0 70px 0 50px;
}
.trans .bar{
      display:block;
      širina: 9px;
      višina: 9px;
      ozadje: #000;
      položaj: absoluten;
      zgoraj: 50 %;
      z-indeks:2;
      Rob:-4px 0 0 -4px;
      mejni radij: 60 %;
}
.trans .bar:after{
      vsebina:"";
      display:block;
      širina:11px;
      višina: 12px;
      položaj: absoluten;
      zgoraj: -13px;
      levo:-13px;
      z-indeks:100;
      mejni radij: 60 %;
      ozadje: RGBA (250,250,250,,85);
}
.pullLeft .trans .bar{
      transform:skewX(-15°F);
      -webkit-transform:skewX(-15°);
      -o-transformacija:skewX(-15°);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
      transform:skewX(-15°°) lestvica(-1,1);
      -webkit-transform:skewX(-15°°) lestvica(-1,1);
      -o-transformacija:skewX(-15°°) lestvica(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼结束*******/
.ani-narrow{
      animacija: ANI-ozko 20s brezkončno olajšanje;
      -webkit-animacija: ani-ozke 20s ease-out neskončno;
      -o-animacija:ani-ozke 20s ease-out neskončno;
}
@keyframes ani-narrow{
      0% {neprosojnost:1; transform:(1); }
      5% {neprosojnost:1; transform:(1); }
      10 % {neprosojnost:0; transform:(0); }
      87 % {neprosojnost: 0; transform:(0); }
      90 % {neprosojnost: 1; transform:(1); }
      100 % {neprosojnost:1; transform:(1); }
}
@-webkit-keyframes ani-narrow{
      0% {neprosojnost:1; -webkit-transform:(1); }
      5% {neprosojnost:1; -webkit-transform:(1); }
      10 % {neprosojnost:0; -webkit-transform:(0); }
      87 % {neprosojnost: 0; -webkit-transform:(0); }
      90 % {neprosojnost: 1; -webkit-transform:(1); }
      100 % {neprosojnost:1; -webkit-transform:(1); }
}
@-o-keyframes ani-narrow{
      0% {neprosojnost:1; -o-transformacija:(1); }
      5% {neprosojnost:1; -o-transformacija:(1); }
      10 % {neprosojnost:0; -o-transform:(0); }
      87 % {neprosojnost: 0; -o-transform:(0); }
      90 % {neprosojnost: 1; -o-transformacija:(1); }
      100 % {neprosojnost:1; -o-transformacija:(1); }
}
.ani-zoom{
      animacija: ani-zoom 20s linearno neskončno;
      -webkit-animacija: ani-zoom 20s linearna neskončnost;
      -o-animacija:ani-zoom 20s linearno neskončno;
}
@keyframes ani-zoom{
      0% {neprosojnost:0; transform:(0); }
      5 % {neprosojnost: 0; transform:(0); }
      8% {neprosojnost:1; transform:(1); }
      60 % {neprosojnost:1; transform:(1); }
      62 % {neprosojnost: 0; transform:(1.5); }
      100% {neprosojnost:0; transform:(0); }
}
@-webkit-keyframes ani-zoom{
      0% {neprosojnost:0; -webkit-transform:(0); }
      5 % {neprosojnost: 0; -webkit-transform:(0); }
      8% {neprosojnost:1; -webkit-transform:(1); }
      60 % {neprosojnost:1; -webkit-transform:(1); }
      62 % {neprosojnost: 0; -webkit-transform:(1.5); }
      100% {neprosojnost:0; -webkit-transform:(0); }
}
@-o-keyframes ani-zoom{
      0% {neprosojnost:0; -o-transform:(0); }
      5 % {neprosojnost: 0; -o-transform:(0); }
      8% {neprosojnost:1; -o-transformacija:(1); }
      60 % {neprosojnost:1; -o-transformacija:(1); }
      62 % {neprosojnost: 0; -o-transformacija:(1.5); }
      100% {neprosojnost:0; -o-transform:(0); }
}
.ani-rotateHook{
      animacija: 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% {neprosojnost:0; transform:(0) rotate(0); }
      9% {neprosojnost:0; transform:(0) rotate(0); }
      13 % {neprosojnost:1; transform:skala(1) rotacija (-360°); }
      35 % {neprosojnost:1; transform:skala(1) rotacija (-360°); }
      38 % {neprosojnost: 0; transform:skala (1,8), rotacija (-540 stopinj); }
      100% {neprosojnost:0; transform:(0) rotate(0); }
}
@-webkit-keyframes ani-rotateHook{
      0% {neprosojnost:0; -webkit-transform:(0) rotate(0); }
      9% {neprosojnost:0; -webkit-transform:(0) rotate(0); }
      13 % {neprosojnost:1; -webkit-transform:(1) rotate(-360°F); }
      35 % {neprosojnost:1; -webkit-transform:(1) rotate(-360°F); }
      38 % {neprosojnost: 0; -webkit-transform:(1.8) rotate(-540°); }
      100% {neprosojnost:0; -webkit-transform:(0) rotate(0); }
}
@-o-keyframes ani-rotateHook{
      0% {neprosojnost:0; -o-transformacija:skala(0) rotacija(0); }
      9% {neprosojnost:0; -o-transformacija:skala(0) rotacija(0); }
      13 % {neprosojnost:1; -o-transformacija:skala(1) rotacija (-360°); }
      35 % {neprosojnost:1; -o-transformacija:skala(1) rotacija (-360°); }
      38 % {neprosojnost: 0; -o-transformacija:skala(1,8), rotacija (-540°); }
      100% {neprosojnost:0; -o-transformacija:skala(0) rotacija(0); }
}
.ani-rotateTube{
      animacija: ani-rotateTube 20s ease-in-out neskončno;
      -webkit-animation:ani-rotateTube 20s ease-in-out neskončno;
      -o-animation:ani-rotateTube 20s ease-in-out neskončno;
}
@keyframes ani-rotateTube{
      0% {neprosojnost:0; transform:(0) rotate(0); }
      35 % {neprosojnost: 0; transform:(0) rotate(0); }
      40% {neprosojnost:1; transform:skala(1) rotacija (-360°); }
      60 % {neprosojnost:1; transform:skala(1) rotacija (-360°); }
      100 % {neprosojnost:1; transform:skala(1) rotacija (-360°); }
}
@-webkit-keyframes ani-rotateTube{
      0% {neprosojnost:0; -webkit-transform:(0) rotate(0); }
      35 % {neprosojnost: 0; -webkit-transform:(0) rotate(0); }
      40% {neprosojnost:1; -webkit-transform:(1) rotate(-360°F); }
      60 % {neprosojnost:1; -webkit-transform:(1) rotate(-360°F); }
      100 % {neprosojnost:1; -webkit-transform:(1) rotate(-360°F); }
}
@-o-keyframes ani-rotateTube{
      0% {neprosojnost:0; -o-transformacija:skala(0) rotacija(0); }
      35 % {neprosojnost: 0; -o-transformacija:skala(0) rotacija(0); }
      40% {neprosojnost:1; -o-transformacija:skala(1) rotacija (-360°); }
      60 % {neprosojnost:1; -o-transformacija:skala(1) rotacija (-360°); }
      100 % {neprosojnost:1; -o-transformacija:skala(1) rotacija (-360°); }
}
.ani-senca{
      animacija: ani-senca 20s linearna neskončnost;
      -webkit-animacija:ani-shadow 20s linearna neskončnost;
      -o-animacija:ani-senca 20s linearna neskončnost;
}
@keyframes ani-shadow{
      0% {neprosojnost:0; škatla-senca:nobenih; }
      58 % {neprosojnost: 0; škatla-senca:nobenih; }
      64 % {neprosojnost: 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 0 44px #a6a6a6,0 0 0 46px #000; }
      87 % {neprosojnost: 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 0 44px #a6a6a6,0 0 0 46px #000; }
      90 % {neprosojnost: 0; škatla-senca:nobenih; }
      100% {neprosojnost:0; škatla-senca:nobenih; }
}
@-webkit-keyframes ani-shadow{
      0% {neprosojnost:0; škatla-senca:nobenih; }
      58 % {neprosojnost: 0; škatla-senca:nobenih; }
      64 % {neprosojnost: 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 0 44px #a6a6a6,0 0 0 46px #000; }
      87 % {neprosojnost: 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 0 44px #a6a6a6,0 0 0 46px #000; }
      90 % {neprosojnost: 0; škatla-senca:nobenih; }
      100% {neprosojnost:0; škatla-senca:nobenih; }
}
@-o-keyframes ani-shadow{
      0% {neprosojnost:0; škatla-senca:nobenih; }
      58 % {neprosojnost: 0; škatla-senca:nobenih; }
      64 % {neprosojnost: 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 0 44px #a6a6a6,0 0 0 46px #000; }
      87 % {neprosojnost: 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 0 44px #a6a6a6,0 0 0 46px #000; }
      90 % {neprosojnost: 0; škatla-senca:nobenih; }
      100% {neprosojnost:0; škatla-senca:nobenih; }
}
.ani-ozko,.ani-zoom,.ani-vrtiHook,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
      način za izpolnjevanje animacije:naprej;
      -webkit-animacija-polnilni način:oba;
      -o-animation-fill-mode:oba;
}
</style>
</head>

<body>
<div class="container">
      <!-- levo oko se začne - >
<div class="eyesBoxs pullLeft">
            <div class="profile skewLeft"></div>
      <div class="shadow skewLeft"></div>
      <div class="basic ani-narrow"></div>
      <div class="eyes ani-zoom">
         <div class="linija">
            <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="tube 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>
      <!-- koncu levega očesa - >
<!-- desno oko začne - >
<div class="eyesBoxs pullRight">
            <div class="profile skewRight"></div>
      <div class="shadow skewRight"></div>
      <div class="basic ani-narrow"></div>
      <div class="eyes ani-zoom">
         <div class="linija">
            <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="tube 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>
      <!-- desno oko - >
</div>
</body>
[/</html>mw_shl_code]

Neprimerljiv na svetu · Objavljeno na 14. 11. 2014 17:57:04

To objavo je nazadnje uredil Tianxia Wushuang 14. 11. 2014 ob 18:00

Admin · Objavljeno na 14. 11. 2014 17:58:15

Dobre stvari sem najprej zbral

Temperatura v severnem mestu je 22 stopinj · Objavljeno na 14. 11. 2014 21:53:23

Toliko kode za eno oko?

Neprimerljiv na svetu · Objavljeno na 14. 11. 2014 22:12:26

Temperatura tkanja Beicheng 22 stopinj Objavljeno 14. 11. 2014 ob 21:53
Toliko kode za eno oko?

Ni samo oko! Če ga enkrat zaženeš na spletu, boš vedel

Sliva s črnim trebuhom · Objavljeno na 14. 11. 2014 22:23:43

To je neverjetno, pa še oko reinkarnacije

[CSS/DIV] CSS3 Izdelava Sharingana (animacija)

Partitura

Ogledi odsekov