CSS3 Making Sharingan (animatsioon)

Maailmas võrreldamatu · Postitatud 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; pehmendus: 0; }
.container{ width:750px; kõrgus: 200px; marginaal: 30px automaat; ülevoolavus: peidetud; taust:#000; positsioon: suhteline; }
.eyesBoxs{width:130px; kõrgus: 70px; positsioon: absoluutne; top:50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
      laius: 130px;
      kõrgus: 70px;
      Taust:#fff;
      positsioon: absoluutne;
      top:0;
      vasak:0;
      ülevoolavus: peidetud;
      piiriraadius: 0 70px 0 50px;
}
.shadow{
      display:block;
      laius: 130px;
      kõrgus: 70px;
      positsioon: absoluutne;
      top:0;
      z-indeks:5;
      piiriraadius: 0 90px 0 60px;
      box-shadow:5px 12px 2px 5px RGBA(0,0,0,.25) sissejuhatus;
}
.skewLeft{
      transform:skewX(15°);
      -webkit-transform:skewX(15°);
      -o-transform:skewX(15degree);
}
.skewRight{
      transform:skewX(-15°) skaala(-1,1);
      -webkit-transform:skewX(-15°) scale(-1,1);
      -o-transform:skewX(-15°) skaala(-1,1);
}
.basic{
      laius: 60px;
      kõrgus: 60px;
      taust:#000;
      positsioon: absoluutne;
      top:50%;
      vasak: 50%;
      z-indeks:10;
      margin-top:-30px;
      piiriraadius: 60%;
}
.basic:before{
      sisu:"";
      display:block;
      laius: 10px;
      kõrgus: 11px;
      positsioon: absoluutne;
      vasak: 15px;
      top:15px;
      z-indeks:100;
      piiriraadius: 60%;
      Taustapilt:radiaal-gradient (ring, 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(ring,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
      -o-taustapilt:radiaal-gradient(ring,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
}
.pullLeft .basic{
      marginaal vasakul:-33px;
}
.pullRight .basic{
      serv vasakul:-27px;
}
.eyes{
      laius: 55px;
      kõrgus: 55px;
      Taust:#ff0000;
      positsioon: absoluutne;
      top:8px;
      piiriraadius: 60%;
      kast-varju:0 0 2px 4px #bd0000 sisse seatud,0 0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
      laius: 64%;
      pikkus: 64%;
      Taust:#ff0000;
      positsioon: absoluutne;
      parem:0;
      vasak:0;
      top:10px;
      marginaal: 0 automaatne;
      piiriraadius: 60%;
      box-shadow:0 0 2px 0 #b20000 sisse seatud;
}
.eyes .line:before{
      sisu:"";
      display:block;
      laius: 10px;
      kõrgus: 11px;
      positsioon: absoluutne;
      vasakul:3px;
      top:4px;
      z-indeks:100;
      piiriraadius: 60%;
      Taustapilt:radiaal-gradient (ring, 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-taustapilt:radiaal-gradient(ring,RGB(225,225,225),RGB(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
}
.eyes .line:after{
      sisu:"";
      display:block;
      laius: 10px;
      kõrgus: 10px;
      positsioon: absoluutne;
      taust:#000;
      parem:0;
      vasakul:-1px;
      top:13px;
      z-indeks:100;
      marginaal: 0 automaatne;
      piiriraadius: 60%;
      transform:pööra(150°C);
      -webkit-transform:rotate(150°C);
      -o-teisendus: pööra(150°);
      animatsioon: värviline 20ndate lõpmatu mugavus;
      -webkit-animation:colour 20s ease-in infinite;
      -o-animatsioon:colour 20s ease-in infinite;
}
@keyframes värv{
      0%{background:#000; }
      35%{taust:#000; }
      40%{tausta:#f00; }
      100%{background:#f00; }
}
@-webkit-keyframes colour{
      0%{background:#000; }
      35%{taust:#000; }
      40%{tausta:#f00; }
      100%{background:#f00; }
}
@-o-keyframes colour{
      0%{background:#000; }
      35%{taust:#000; }
      40%{tausta:#f00; }
      100%{background:#f00; }
}
/*******三勾玉开始*******/
.hook{
      laius: 92%;
      kõrgus: 92%;
      positsioon: absoluutne;
      parem:0;
      vasak:0;
      top:5%;
      marginaal: 0 automaatne;
      piiriraadius: 60%;
}
.hook .bar{
      display:block;
      laius: 100%;
      kõrgus: 100%;
      positsioon: absoluutne;
      vasak:0;
      top:0;
      piiriraadius: 60%;
}
.hook .bar b{
      display:block;
      laius: 8px;
      kõrgus: 8px;
      taust:#000;
      positsioon: absoluutne;
      vasak:0;
      bottom:0;
      piiriraadius: 60%;
}
.hook .bar b:after{
      sisu:"";
      laius: 8px;
      kõrgus: 8px;
      border-color:läbipaistev #000 läbipaistev;
      äärisstiil: tugev;
      äärelaius: 0 0 5px 0;
      positsioon: absoluutne;
      üleval:-1px;
      vasakul:-3px;
      z-indeks:100;
      piiriraadius: 0 0 0 70%;
      transform:pööra(-75°);
      -webkit-transform:rotate(-75°C);
      -o-teisendus: pööra(-75°C);
}
.hook .bar:nth-child(1){
      transform:pööra(10°);
      -webkit-transform:rotate(10°);
      -o-teisendus: pööra(10°);
}
.hook .bar:nth-child(2){
      transform:pööra(130°);
      -webkit-transform:rotate(130°C);
      -o-teisendus:pööra(130°);
}
.hook .bar:nth-child(3){
      transform:pöörle(250°C);
      -webkit-transform:rotate(250°C);
      -o-teisendus: pööra(250°C);
}
/*******三勾玉结束*******/
/*******万花筒开始*******/
.tube{
      laius: 93%;
      pikkus: 93%;
      positsioon: absoluutne;
      parem:0;
      vasakul:0px;
      top:2px;
      marginaal: 0 automaatne;
      taust:#000;
      piiriraadius: 60%;
}
.tube .bar{
      display:block;
      laius: 10px;
      kõrgus: 20px;
      äärisstiil: tugev;
      äärelaius: 0 0 0 10px;
      äärisvärv: läbipaistev läbipaistev läbipaistev must;
      positsioon: absoluutne;
      piiriraadius: 100% 0 0 0;
}
.tube .bar:nth-child(1){
      tipp:-10px;
      vasak:2px;
      transform:pööra(-10°C);
}
.tube .bar:nth-child(2){
      bottom:0px;
      paremal:-10px;
      transform:pööra(105°);
      -webkit-transform:rotate(105°);
      -o-teisendus: pööra(105°);
}
.tube .bar:nth-child(3){
      all:-3px;
      vasakul:-10px;
      transform:pööra(235°);
      -webkit-transform:rotate(235°C);
      -o-teisendus: pööra(235°C);
}
/*******万花筒结束*******/
/*******轮回眼开始*******/
.trans{
      laius: 130px;
      kõrgus: 70px;
      positsioon: absoluutne;
      ülevoolavus: peidetud;
      top:0;
      vasak:0;
      piiriraadius: 0 70px 0 50px;
}
.trans .bar{
      display:block;
      laius: 9px;
      kõrgus: 9px;
      taust:#000;
      positsioon: absoluutne;
      top:50%;
      z-indeks:2;
      marginaal: -4px 0 0 -4px;
      piiriraadius: 60%;
}
.trans .bar:after{
      sisu:"";
      display:block;
      laius: 11px;
      kõrgus: 12px;
      positsioon: absoluutne;
      ülemine:-13px;
      vasakul:-13px;
      z-indeks:100;
      piiriraadius: 60%;
      Taust: rgba(250,250,250,.85);
}
.pullLeft .trans .bar{
      transform:skewX(-15°);
      -webkit-transform:skewX(-15degree);
      -o-transform:skewX(-15degree);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
      transform:skewX(-15°) skaala(-1,1);
      -webkit-transform:skewX(-15°) scale(-1,1);
      -o-transform:skewX(-15°) skaala(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼结束*******/
.ani-kitsas{
      animatsioon: Ani-kitsas 20ndate lõpmatu kergendus;
      -webkit-animation:ani-kitsas 20ndate lõpmatu kergendus;
      -o-animatsioon:ani-kitsas 20ndate lõpmatu;
}
@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{
      animatsioon: ani-zoom 20s lineaarne lõpmatus;
      -webkit-animation:ani-zoom 20s lineaarne lõpmatus;
      -o-animatsioon:ani-zoom 20s lineaarne lõpmatu;
}
@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{
      animatsioon:ani-rotateHook 20s lõpmatu mugavus;
      -webkit-animation:ani-rotateHook 20s lõpmatult lihtne;
      -o-animatsioon:ani-rotateHook 20s lõpmatu kerge sisse-sisse;
}
@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) pööra(-360°C); }
      35%{opacity:1; transform:scale(1) pööra(-360°C); }
      38%{opacity:0; transform:skaala(1,8) pööra(-540°C); }
      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(-360°C); }
      35%{opacity:1; -webkit-transform:scale(1) rotate(-360°C); }
      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-teisendus: skaala(0) pööra(0); }
      9%{opacity:0; -o-teisendus: skaala(0) pööra(0); }
      13%{opacity:1; -o-transform: scale(1) pöörle(-360 kraadi); }
      35%{opacity:1; -o-transform: scale(1) pöörle(-360 kraadi); }
      38%{opacity:0; -o-teisendus: skaala (1,8) pööramine (-540 kraadi); }
      100%{opacity:0; -o-teisendus: skaala(0) pööra(0); }
}
.ani-rotateTube{
      animatsioon: ani-rotateTube 20s lõpmatu sisse-välja lõpmatus;
      -webkit-animation:ani-rotateTube 20s lõpmatu sisse-sisse-välja lõpmatu;
      -o-animatsioon:ani-rotateTube 20s lõpmatu sisse-välja lõpmatu;
}
@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) pööra(-360°C); }
      60%{opacity:1; transform:scale(1) pööra(-360°C); }
      100%{opacity:1; transform:scale(1) pööra(-360°C); }
}
@-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(-360°C); }
      60%{opacity:1; -webkit-transform:scale(1) rotate(-360°C); }
      100%{opacity:1; -webkit-transform:scale(1) rotate(-360°C); }
}
@-o-keyframes ani-rotateTube{
      0%{opacity:0; -o-teisendus: skaala(0) pööra(0); }
      35%{opacity:0; -o-teisendus: skaala(0) pööra(0); }
      40%{opacity:1; -o-transform: scale(1) pöörle(-360 kraadi); }
      60%{opacity:1; -o-transform: scale(1) pöörle(-360 kraadi); }
      100%{opacity:1; -o-transform: scale(1) pöörle(-360 kraadi); }
}
.ani-vari{
      animatsioon: ani-shadow 20ndate lineaarne lõpmatus;
      -webkit-animatsioon:ani-shadow 20ndate lineaarne lõpmatus;
      -o-animatsioon:ani-shadow 20s lineaarne lõpmatus;
}
@keyframes ani-shadow{
      0%{opacity:0; kast-varju:puudub; }
      58%{opacity:0; kast-varju:puudub; }
      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; kast-varju:puudub; }
      100%{opacity:0; kast-varju:puudub; }
}
@-webkit-keyframes ani-shadow{
      0%{opacity:0; kast-varju:puudub; }
      58%{opacity:0; kast-varju:puudub; }
      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; kast-varju:puudub; }
      100%{opacity:0; kast-varju:puudub; }
}
@-o-keyframes ani-shadow{
      0%{opacity:0; kast-varju:puudub; }
      58%{opacity:0; kast-varju:puudub; }
      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; kast-varju:puudub; }
      100%{opacity:0; kast-varju:puudub; }
}
.ani-kitsas,.ani-suumi,.ani-pööra-konks,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
      animatsiooni-täiterežiim:edasi;
      -webkit-animation-fill-mode:mõlemad;
      -o-animation-fill-mode:mõlemad;
}
</style>
</head>

<body>
<div class="konteiner">
      <!-- vasak silm algab - >
<div class="eyesBoxs pullLeft">
            <div class="profile skewLeft"></div>
      <div class="shadow skewLeft"></div>
      <div class="basic ani-kitsas"></div>
      <div class="eyes ani-zoom">
         <div class="line">
            <div class="hook ani-rotateHook">
                     <span klass="baar"><b></b></span>
                  <span klass="baar"><b></b></span>
                  <span klass="baar"><b></b></span>
            </div>
            <div class="toru ani-rotateTube">
                     <span klass="baar"></span>
                     <span klass="baar"></span>
                     <span klass="baar"></span>
            </div>
         </div>
      </div>
      <div class="trans skewLeft">
            <span class="bar ani-shadow"></span>
      </div>
</div>
      <!-- vasaku silma ots - >
<!-- algab parem silm - >
<div class="eyesBoxs pullRight">
            <div class="profile skewRight"></div>
      <div class="shadow skewRight"></div>
      <div class="basic ani-kitsas"></div>
      <div class="eyes ani-zoom">
         <div class="line">
            <div class="hook ani-rotateHook">
                     <span klass="baar"><b></b></span>
                  <span klass="baar"><b></b></span>
                  <span klass="baar"><b></b></span>
            </div>
            <div class="toru ani-rotateTube">
                     <span klass="baar"></span>
                     <span klass="baar"></span>
                     <span klass="baar"></span>
            </div>
         </div>
      </div>
      <div class="trans skewRight">
            <span class="bar ani-shadow"></span>
      </div>
</div>
      <!-- parema silma otsad - >
</div>
</body>
[/</html>mw_shl_code]

Maailmas võrreldamatu · Postitatud 14.11.2014 17:57:04

Seda postitust toimetas viimati Tianxia Wushuang 2014-11-14 kell 18:00

Admin · Postitatud 14.11.2014 17:58:15

Esimesena kogusin häid asju

Põhjalinna temperatuur on 22 kraadi · Postitatud 14.11.2014 21:53:23

Nii palju koodi ühe silma jaoks?

Maailmas võrreldamatu · Postitatud 14.11.2014 22:12:26

Beichengi kudumise temperatuur 22 kraadi Postitatud 2014-11-14 21:53
Nii palju koodi ühe silma jaoks?

See pole lihtsalt silm! Sa jooksutad selle korra veebis ja saad sellest teada

Mustakõhuline ploom · Postitatud 14.11.2014 22:23:43

See on hämmastav, ja seal on ka reinkarnatsiooni silm

[CSS/DIV] CSS3 Making Sharingan (animatsioon)

Skoor

Vaadatud sektsioonid