CSS3 Sharingan Yapımında (Animasyon)

Dünyada eşsiz · Yayınlandı 14.11.2014 17:55:02

[mw_shl_code=css,doğru] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; padding:0; }
.container{ width:750px; yükseklik: 200px; marj:30px otomatik; overflow:hidden; arka plan:#000; konum:akraba; }
.eyesBoxs{width:130px; yükseklik: 70px; pozisyon: mutlak; top:50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
      genişlik: 130px;
      yükseklik: 70px;
      Arka plan: #fff;
      pozisyon: mutlak;
      top:0;
      sol:0;
      overflow:hidden;
      sınır yarıçapı:0 70px 0 50px;
}
.shadow{
      display:block;
      genişlik: 130px;
      yükseklik: 70px;
      pozisyon: mutlak;
      top:0;
      z-index:5;
      sınır-yarıçapı:0 90px 0 60px;
      box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) damarı;
}
.skewLeft{
      transform:skewX(15derece);
      -webkit-transform:skewX(15derece);
      -o-transform:skewX(15derece);
}
.skewRight{
      transform:skewX(-15derece) ölçek(-1,1);
      -webkit-transform:skewX(-15deg) ölçek(-1,1);
      -o-transform:skewX(-15derece) ölçek(-1,1);
}
.basic{
      genişlik: 60px;
      yükseklik: 60px;
      arka plan:#000;
      pozisyon: mutlak;
      tepe:%50;
      sol:%50;
      z-index:10;
      kenar-tepe:-30px;
      sınır yarıçapı: %60;
}
.basic:before{
      içerik:"";
      display:block;
      genişlik: 10px;
      yükseklik: 11px;
      pozisyon: mutlak;
      sol:15px;
      üst: 15px;
      z-indeksi:100;
      sınır yarıçapı: %60;
      arka plan görseli:radyal-gradyan(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-gradyan(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-gradyan(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
}
.pullLeft .basic{
      kenar-sol:-33px;
}
.pullRight .basic{
      kenar-sol:-27px;
}
.eyes{
      genişlik: 55px;
      yükseklik: 55px;
      Arka plan:#ff0000;
      pozisyon: mutlak;
      üst:8px;
      sınır yarıçapı: %60;
      kutu-gölge:0 0 2px 4px #bd0000 damı,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
      genişlik:%64;
      boy: %64;
      Arka plan:#ff0000;
      pozisyon: mutlak;
      sağ:0;
      sol:0;
      üst:10px;
      marj:0 otomatik;
      sınır yarıçapı: %60;
      kutu-gölge:0 0 2px 0 #b20000 damı;
}
.eyes .line:before{
      içerik:"";
      display:block;
      genişlik: 10px;
      yükseklik: 11px;
      pozisyon: mutlak;
      sol:3px;
      üst:4px;
      z-indeksi:100;
      sınır yarıçapı: %60;
      arka plan görseli:radyal-gradyan(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-gradyan(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-gradyan(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
}
.eyes .line:after{
      içerik:"";
      display:block;
      genişlik: 10px;
      yükseklik: 10px;
      pozisyon: mutlak;
      arka plan:#000;
      sağ:0;
      sol:-1px;
      üst:13px;
      z-indeksi:100;
      marj:0 otomatik;
      sınır yarıçapı: %60;
      transform:döndür(150derece);
      -webkit-transform:rotate(150derece);
      -o-dönüşüm:döndür(150derece);
      animasyon: renkli 20'ler kolaylık-sonsuz;
      -webkit-animation:colour 20s ease-in infinite;
      -o-animasyon:renkli 20'ler kolay-in-sonsuz;
}
@keyframes color{
      0%{background:#000; }
      35%{background:#000; }
      %40{background:#f00; }
      100%{background:#f00; }
}
@-webkit-keyframes color{
      0%{background:#000; }
      35%{background:#000; }
      %40{background:#f00; }
      100%{background:#f00; }
}
@-o-keyframes color{
      0%{background:#000; }
      35%{background:#000; }
      %40{background:#f00; }
      100%{background:#f00; }
}
/*******三勾玉开始*******/
.hook{
      genişlik:%92;
      boy: %92;
      pozisyon: mutlak;
      sağ:0;
      sol:0;
      tepe:%5;
      marj:0 otomatik;
      sınır yarıçapı: %60;
}
.hook .bar{
      display:block;
      genişlik: %100;
      yükseklik: %100;
      pozisyon: mutlak;
      sol:0;
      top:0;
      sınır yarıçapı: %60;
}
.hook .bar b{
      display:block;
      genişlik: 8px;
      boy: 8px;
      arka plan:#000;
      pozisyon: mutlak;
      sol:0;
      alt:0;
      sınır yarıçapı: %60;
}
.hook .bar b:after{
      içerik:"";
      genişlik: 8px;
      boy: 8px;
      border-color:şeffaf şeffaf #000 şeffaf;
      border-style:solid;
      border-width:0 0 5px 0;
      pozisyon: mutlak;
      üst:-1px;
      sol:-3px;
      z-indeksi:100;
      sınır yarıçapı: 0 0 0 %70;
      transform:döndür(-75derece);
      -webkit-transform:rotate(-75derece);
      -o-dönüşüm:döndür(-75derece);
}
.hook .bar:nth-child(1){
      transform:rotate(10°);
      -webkit-transform:rotate(10derece);
      -o-transform:rotate(10°);
}
.hook .bar:nth-child(2){
      transform:döndür(130derece);
      -webkit-transform:rotate(130derece);
      -o-dönüşüm:döndür(130°);
}
.hook .bar:nth-child(3){
      transform:döndür(250derece);
      -webkit-transform:rotate(250derece);
      -o-dönüşüm:döndür(250derece);
}
/*******三勾玉结束*******/
/*******万花筒开始*******/
.tube{
      genişlik:%93;
      yükseklik:%93;
      pozisyon: mutlak;
      sağ:0;
      sol:0px;
      top:2px;
      marj:0 otomatik;
      arka plan:#000;
      sınır yarıçapı: %60;
}
.tube .bar{
      display:block;
      genişlik: 10px;
      yükseklik: 20px;
      border-style:solid;
      border-width:0 0 0 10px;
      border-color:şeffaf şeffaf şeffaf siyah;
      pozisyon: mutlak;
      sınır-yarıçapı:%100 0 0 0;
}
.tube .bar:nth-child(1){
      üst:-10px;
      sol:2px;
      transform:rotate(-10°);
}
.tube .bar:nth-child(2){
      bottom:0px;
      sağ:-10px;
      transform:döndür(105derece);
      -webkit-transform:rotate(105derece);
      -o-dönüşüm:döndür(105derece);
}
.tube .bar:nth-child(3){
      alt:-3px;
      sol:-10px;
      transform:döndür(235°);
      -webkit-transform:rotate(235derece);
      -o-dönüşüm:döndür(235derece);
}
/*******万花筒结束*******/
/*******轮回眼开始*******/
.trans{
      genişlik: 130px;
      yükseklik: 70px;
      pozisyon: mutlak;
      overflow:hidden;
      top:0;
      sol:0;
      sınır yarıçapı:0 70px 0 50px;
}
.trans .bar{
      display:block;
      genişlik: 9px;
      boy: 9px;
      arka plan:#000;
      pozisyon: mutlak;
      tepe:%50;
      z-index:2;
      marj:-4px 0 0 -4px;
      sınır yarıçapı: %60;
}
.trans .bar:after{
      içerik:"";
      display:block;
      genişlik: 11px;
      boy: 12px;
      pozisyon: mutlak;
      üst:-13px;
      sol:-13px;
      z-indeksi:100;
      sınır yarıçapı: %60;
      Arka plan: rgba(250,250,250,.85);
}
.pullLeft .trans .bar{
      transform:skewX(-15derece);
      -webkit-transform:skewX(-15deg);
      -o-transform:skewX(-15derece);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
      transform:skewX(-15derece) ölçek(-1,1);
      -webkit-transform:skewX(-15deg) ölçek(-1,1);
      -o-transform:skewX(-15derece) ölçek(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼结束*******/
.ani-dar{
      animasyon: ANI-dar 20'ler rahatlama sonsuz;
      -webkit-animation:ani-dar 20'ler rahatlama-sonsuz;
      -o-animasyon:ani-dar 20'ler rahatlama sonsuz;
}
@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{
      animasyon: ani-zoom 20s lineer sonsuz;
      -webkit-animation:ani-zoom 20s doğrusal sonsuz;
      -o-animasyon:ani-zoom 20s doğrusal sonsuz;
}
@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-dönüşüm:ölçek(1.5); }
      100%{opacity:0; -o-transform:scale(0); }
}
.ani-rotateHook{
      animasyon:ani-rotateHook 20s kolaylıkla sonsuz;
      -webkit-animation:ani-rotateHook 20s ease-in infinite;
      -o-animasyon:ani-rotateHook 20s kolaylık-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) döndür(-360°C); }
      35%{opacity:1; transform:scale(1) döndür(-360°C); }
      38%{opacity:0; dönüşüm:ölçek(1.8) döndür(-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(-360derece); }
      35%{opacity:1; -webkit-transform:scale(1) rotate(-360derece); }
      38%{opacity:0; -webkit-transform:scale(1.8) döndür(-540derece); }
      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-dönüşüm:scale(1) döndür(-360derece); }
      35%{opacity:1; -o-dönüşüm:scale(1) döndür(-360derece); }
      38%{opacity:0; -o-dönüşüm:ölçek(1.8) döndür(-540°C); }
      100%{opacity:0; -o-transform:scale(0) rotate(0); }
}
.ani-rotateTube{
      animasyon:ani-rotateTube 20s kolay giriş-çıkış sonsuz;
      -webkit-animation:ani-rotateTube 20s kolay giriş-çıkış sonsuz;
      -o-animation:ani-rotateTube 20s kolay giriş-çıkış sonsuz;
}
@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) döndür(-360°C); }
      60%{opacity:1; transform:scale(1) döndür(-360°C); }
      100%{opacity:1; transform:scale(1) döndür(-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(-360derece); }
      60%{opacity:1; -webkit-transform:scale(1) rotate(-360derece); }
      100%{opacity:1; -webkit-transform:scale(1) rotate(-360derece); }
}
@-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-dönüşüm:scale(1) döndür(-360derece); }
      60%{opacity:1; -o-dönüşüm:scale(1) döndür(-360derece); }
      100%{opacity:1; -o-dönüşüm:scale(1) döndür(-360derece); }
}
.ani-gölge{
      animasyon: ani-shadow 20s lineer infinite;
      -webkit-animation:ani-shadow 20'ler doğrusal sonsuz;
      -o-animasyon: ani-shadow 20'ler doğrusal sonsuz;
}
@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-dar,.ani-zoom,.ani-döndürHook,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
      animasyon-doldurma modu:ileri;
      -webkit-animation-fill-mode:both
      -o-animasyon-doldurma modu:ikisi;
}
</style>
</head>

<body>
<div class="container">
      <!-- sol göz başlıyor - >
<div class="eyesBoxs pullLeft">
            <div class="profile skewLeft"></div>
      <div class="shadow skewLeft"></div>
      <div class="temel ani-dar"></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="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>
      <!-- sol göz ucu - >
<!-- Sağ göz başlar - >
<div class="eyesBoxs pullRight">
            <div class="profile skewRight"></div>
      <div class="shadow skewRight"></div>
      <div class="temel ani-dar"></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="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>
      <!-- sağ göz uçları - >
</div>
</body>
[/</html>mw_shl_code]

Dünyada eşsiz · Yayınlandı 14.11.2014 17:57:04

Bu gönderi en son 2014-11-14 saat 18:00 tarihinde Tianxia Wushuang tarafından düzenlenmiştir

Admin · Yayınlandı 14.11.2014 17:58:15

İlk topladığım iyi şeyleri

Kuzey şehirde sıcaklık 22 derecedir · Yayınlandı 14.11.2014 21:53:23

Bir göz için bu kadar çok kod mu?

Dünyada eşsiz · Yayınlandı 14.11.2014 22:12:26

Beicheng Dokuma Sıcaklığı 22 derece 2014-11-14 tarihinde yayınlandı 21:53
Bir göz için bu kadar çok kod mu?

Sadece bir göz değil! Bir kez çevrimiçi çalıştırırsan ve anlarsın

Siyah karınlı erik · Yayınlandı 14.11.2014 22:23:43

Harika, ayrıca reenkarnasyon gözü de var

[CSS/DIV] CSS3 Sharingan Yapımında (Animasyon)

Puan

Görüntülenen bölümler