CSS3 Sharingan maken (Animatie)

Ongeëvenaard in de wereld · Geplaatst op 14-11-2014 17:55:02

[mw_shl_code=css, waar] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<stijltype="text/css">
*{marge:0; opvulling: 0; }
.container{ breedte:750px; Hoogte: 200px; marge: 30px auto; Overflow: Verborgen; Achtergrond: #000; positie: relatief; }
.eyesBoxs{width:130px; Hoogte: 70px; positie: absoluut; top: 50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
      breedte: 130px;
      Hoogte: 70px;
      Achtergrond: #fff;
      positie: absoluut;
      top:0;
      links:0;
      Overflow: Verborgen;
      border-radius: 0 70px 0 50px;
}
.shadow{
      display:block;
      breedte: 130px;
      Hoogte: 70px;
      positie: absoluut;
      top:0;
      z-index: 5;
      border-radius: 0 90px 0 60px;
      box-shadow: 5px 12px 2px 5px rgba(0,0,0,.25) inzet;
}
.skewLeft{
      transformatie: skewX(15°);
      -webkit-transform:skewX(15°);
      -o-transformatie: skewX(15°);
}
.skewRight{
      transformatie: skewX(-15°) schaal(-1,1);
      -webkit-transform: skewX(-15°) schaal(-1,1);
      -o-transform: skewX(-15°) schaal(-1,1);
}
.basic{
      breedte: 60px;
      Hoogte: 60px;
      Achtergrond: #000;
      positie: absoluut;
      top: 50%;
      links: 50%;
      z-index: 10;
      marge boven: -30 px;
      grensstraal: 60%;
}
.basic:voor{
      inhoud:"";
      display:block;
      breedte: 10 px;
      Lengte: 11 px;
      positie: absoluut;
      links: 15px;
      top: 15px;
      z-index: 100;
      grensstraal: 60%;
      achtergrondafbeelding:radiaal-gradiënt(cirkel,RGB(225,225,225),RGB(225,225,225),RGBA(225,225,225,0.9),RGBA(225,225,0.3));
      -webkit-achtergrondafbeelding:radiaal-gradient(cirkel,rgb(225,225,225),RGB(225,225,225),rgba(225,225,0.9),rgba(225,225,0.3));
      -o-achtergrondafbeelding:radiaal-gradient(cirkel,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,0.3));
}
.pullLeft .basic{
      marge-links:-33px;
}
.pullRight .basic{
      Marge links: 27 px;
}
.ogen{
      breedte: 55px;
      Hoogte: 55px;
      Achtergrond: #ff0000;
      positie: absoluut;
      top: 8px;
      grensstraal: 60%;
      box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
      breedte: 64%;
      lengte: 64%;
      Achtergrond: #ff0000;
      positie: absoluut;
      Goed:0;
      links:0;
      top: 10px;
      marge:0 auto;
      grensstraal: 60%;
      box-shadow:0 0 2px 0 #b20000 inzet;
}
.ogen .line:before{
      inhoud:"";
      display:block;
      breedte: 10 px;
      Lengte: 11 px;
      positie: absoluut;
      links: 3px;
      top:4px;
      z-index: 100;
      grensstraal: 60%;
      achtergrondafbeelding: radiaal-gradiënt(cirkel,rgb(225,225,225),RGB(225,225,225),RGBA(225,225,225,0.7),RGBA(225,225,0.3));
      -webkit-achtergrondafbeelding:radiaal-gradiënt(cirkel,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,0.3));
      -o-achtergrondafbeelding:radiaal-gradiënt(cirkel,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,0.3));
}
.ogen .line:after{
      inhoud:"";
      display:block;
      breedte: 10 px;
      Hoogte: 10 px;
      positie: absoluut;
      Achtergrond: #000;
      Goed:0;
      links: -1px;
      top: 13px;
      z-index: 100;
      marge:0 auto;
      grensstraal: 60%;
      transformeren: roteren (150°);
      -webkit-transform:rotate (150°);
      -o-transformatie:roteer (150°);
      Animatie: Colour 20s Ease-in Infinite;
      -webkit-animation: colour 20s gemakkelijke ingang oneindig;
      -o-animatie: kleur 20s gemakkelijk-in-oneindig;
}
@keyframes kleur{
      0%{background:#000; }
      35%{background:#000; }
      40%{background:#f00; }
      100%{achtergrond:#f00; }
}
@-webkit-keyframes kleur{
      0%{background:#000; }
      35%{background:#000; }
      40%{background:#f00; }
      100%{achtergrond:#f00; }
}
@-o-keyframes kleur{
      0%{background:#000; }
      35%{background:#000; }
      40%{background:#f00; }
      100%{achtergrond:#f00; }
}
/*******三勾玉开始*******/
.hook{
      breedte: 92%;
      Lengte: 92%;
      positie: absoluut;
      Goed:0;
      links:0;
      top: 5%;
      marge:0 auto;
      grensstraal: 60%;
}
.hook .bar{
      display:block;
      breedte: 100%;
      Hoogte: 100%;
      positie: absoluut;
      links:0;
      top:0;
      grensstraal: 60%;
}
.hook .bar b{
      display:block;
      breedte: 8px;
      Hoogte: 8 px;
      Achtergrond: #000;
      positie: absoluut;
      links:0;
      bodem:0;
      grensstraal: 60%;
}
.hook .bar b:na{
      inhoud:"";
      breedte: 8px;
      Hoogte: 8 px;
      randkleur:transparant transparant #000 transparant;
      randstijl: massief;
      border-width:0 0 5px 0;
      positie: absoluut;
      top:-1px;
      links: -3px;
      z-index: 100;
      grensstraal: 0 0 0 70%;
      transformeren: roteren (-75°);
      -webkit-transform:rotate(-75°);
      -o-transform:rotate(-75°);
}
.hook .bar:nth-child(1){
      transformeren: roteren (10 graden);
      -webkit-transform:rotate(10°);
      -o-transform:rotate(10°);
}
.hook .bar:nth-child(2){
      transformeren: roteren (130°);
      -webkit-transform:rotate(130°);
      -o-transform:rotate(130°);
}
.hook .bar:nth-child(3){
      transformeren: roteren (250°);
      -webkit-transform:rotate(250°);
      -o-transformatie:roteer (250°);
}
/*******三勾玉结束*******/
/*******万花筒开始*******/
.tube{
      breedte: 93%;
      lengte: 93%;
      positie: absoluut;
      Goed:0;
      links:0px;
      top: 2px;
      marge:0 auto;
      Achtergrond: #000;
      grensstraal: 60%;
}
.tube .bar{
      display:block;
      breedte: 10 px;
      Hoogte: 20px;
      randstijl: massief;
      border-width:0 0 0 10px;
      randkleur: transparant, transparant, transparant, transparant zwart;
      positie: absoluut;
      grens-straal: 100% 0 0 0;
}
.tube .bar:nth-child(1){
      top: -10px;
      links: 2px;
      transformeren: roteren (-10 graden);
}
.tube .bar:nth-child(2){
      Bottom:0px;
      Rechts: -10px;
      transformeren: roteren (105°);
      -webkit-transform:rotate(105°);
      -o-transform:rotate (105°);
}
.tube .bar:nth-child(3){
      Onder: -3px;
      links: -10px;
      transformeren: roteren (235°);
      -webkit-transform:rotate(235°);
      -o-transform:rotate (235°);
}
/*******万花筒结束*******/
/*******轮回眼开始*******/
.trans{
      breedte: 130px;
      Hoogte: 70px;
      positie: absoluut;
      Overflow: Verborgen;
      top:0;
      links:0;
      border-radius: 0 70px 0 50px;
}
.trans .bar{
      display:block;
      breedte: 9px;
      Lengte: 9 px;
      Achtergrond: #000;
      positie: absoluut;
      top: 50%;
      z-index: 2;
      marge: -4px 0 0 -4px;
      grensstraal: 60%;
}
.trans .bar:na{
      inhoud:"";
      display:block;
      breedte: 11 px;
      Hoogte: 12px;
      positie: absoluut;
      top: -13px;
      links: -13px;
      z-index: 100;
      grensstraal: 60%;
      achtergrond: RGBA (250.250.250,.85);
}
.pullLeft .trans .bar{
      transformatie: skewX(-15°);
      -webkit-transform:skewX(-15°);
      -o-transformatie:skewX(-15°);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
      transformatie: skewX(-15°) schaal(-1,1);
      -webkit-transform: skewX(-15°) schaal(-1,1);
      -o-transform: skewX(-15°) schaal(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼结束*******/
.ani-narrow{
      animatie: ANI-Narrow 20s Ease-out Infinite;
      -webkit-animation: ani-narrow 20s uitweg oneindig;
      -o-animatie: ANI-smalle 20s Ease-out Infinite;
}
@keyframes ani-narrow{
      0%{opaciteit:1; transformatie: schaal(1); }
      5%{opacity:1; transformatie: schaal(1); }
      10%{opaciteit:0; transformatie: schaal(0); }
      87%{opaciteit:0; transformatie: schaal(0); }
      90%{Opacity:1; transformatie: schaal(1); }
      100%{Opacity:1; transformatie: schaal(1); }
}
@-webkit-keyframes ani-narrow{
      0%{opaciteit:1; -webkit-transform:schaal(1); }
      5%{opacity:1; -webkit-transform:schaal(1); }
      10%{opaciteit:0; -webkit-transform:schaal(0); }
      87%{opaciteit:0; -webkit-transform:schaal(0); }
      90%{Opacity:1; -webkit-transform:schaal(1); }
      100%{Opacity:1; -webkit-transform:schaal(1); }
}
@-o-keyframes ani-narrow{
      0%{opaciteit:1; -o-transform: schaal(1); }
      5%{opacity:1; -o-transform: schaal(1); }
      10%{opaciteit:0; -o-transform: schaal(0); }
      87%{opaciteit:0; -o-transform: schaal(0); }
      90%{Opacity:1; -o-transform: schaal(1); }
      100%{Opacity:1; -o-transform: schaal(1); }
}
.ani-zoom{
      animatie: ani-zoom 20s lineair oneindig;
      -webkit-animation: ani-zoom 20s lineair oneindig;
      -o-animatie: ani-zoom 20s lineair oneindig;
}
@keyframes ani-zoom{
      0%{opaciteit:0; transformatie: schaal(0); }
      5%{opaciteit:0; transformatie: schaal(0); }
      8%{opaciteit:1; transformatie: schaal(1); }
      60%{opacity:1; transformatie: schaal(1); }
      62%{opaciteit:0; transformatie: schaal(1,5); }
      100%{opaciteit:0; transformatie: schaal(0); }
}
@-webkit-keyframes ani-zoom{
      0%{opaciteit:0; -webkit-transform:schaal(0); }
      5%{opaciteit:0; -webkit-transform:schaal(0); }
      8%{opaciteit:1; -webkit-transform:schaal(1); }
      60%{opacity:1; -webkit-transform:schaal(1); }
      62%{opaciteit:0; -webkit-transform: schaal(1,5); }
      100%{opaciteit:0; -webkit-transform:schaal(0); }
}
@-o-keyframes ani-zoom{
      0%{opaciteit:0; -o-transform: schaal(0); }
      5%{opaciteit:0; -o-transform: schaal(0); }
      8%{opaciteit:1; -o-transform: schaal(1); }
      60%{opacity:1; -o-transform: schaal(1); }
      62%{opaciteit:0; -o-transformatie: schaal(1,5); }
      100%{opaciteit:0; -o-transform: schaal(0); }
}
.ani-rotateHook{
      animatie: ani-rotateHoek 20's ease-in infinite;
      -webkit-animation:ani-rotateHaak 20s ease-in infinite;
      -o-animatie: ani-rotateHaak 20's in-ease-in oneindig;
}
@keyframes ani-rotateHook{
      0%{opaciteit:0; transformeren: schaal(0) roteren(0); }
      9%{opaciteit:0; transformeren: schaal(0) roteren(0); }
      13%{opaciteit:1; transformeren: schaal(1) roteren (-360 graden); }
      35%{opaciteit:1; transformeren: schaal(1) roteren (-360 graden); }
      38%{opaciteit:0; transformeren: schaal(1,8) roteren (-540 graden); }
      100%{opaciteit:0; transformeren: schaal(0) roteren(0); }
}
@-webkit-keyframes ani-rotateHook{
      0%{opaciteit:0; -webkit-transform:schaal(0) roteren(0); }
      9%{opaciteit:0; -webkit-transform:schaal(0) roteren(0); }
      13%{opaciteit:1; -webkit-transform:schaal(1) roteren(-360°); }
      35%{opaciteit:1; -webkit-transform:schaal(1) roteren(-360°); }
      38%{opaciteit:0; -webkit-transform:schaal(1,8) roteren(-540°); }
      100%{opaciteit:0; -webkit-transform:schaal(0) roteren(0); }
}
@-o-keyframes ani-rotateHook{
      0%{opaciteit:0; -o-transform:schaal(0) roteren(0); }
      9%{opaciteit:0; -o-transform:schaal(0) roteren(0); }
      13%{opaciteit:1; -o-transformatie:schaal(1) roteren(-360°); }
      35%{opaciteit:1; -o-transformatie:schaal(1) roteren(-360°); }
      38%{opaciteit:0; -o-transformatie: schaal(1,8) roteren (-540°); }
      100%{opaciteit:0; -o-transform:schaal(0) roteren(0); }
}
.ani-rotateTube{
      animatie: ani-rotateTube 20's ease-out infinite;
      -webkit-animation:ani-rotateTube 20s ease-in-out infinite;
      -o-animatie: ani-rotateTube 20's ease-out infinite;
}
@keyframes ani-rotateTube{
      0%{opaciteit:0; transformeren: schaal(0) roteren(0); }
      35%{opaciteit:0; transformeren: schaal(0) roteren(0); }
      40%{opaciteit:1; transformeren: schaal(1) roteren (-360 graden); }
      60%{opacity:1; transformeren: schaal(1) roteren (-360 graden); }
      100%{Opacity:1; transformeren: schaal(1) roteren (-360 graden); }
}
@-webkit-keyframes ani-rotateTube{
      0%{opaciteit:0; -webkit-transform:schaal(0) roteren(0); }
      35%{opaciteit:0; -webkit-transform:schaal(0) roteren(0); }
      40%{opaciteit:1; -webkit-transform:schaal(1) roteren(-360°); }
      60%{opacity:1; -webkit-transform:schaal(1) roteren(-360°); }
      100%{Opacity:1; -webkit-transform:schaal(1) roteren(-360°); }
}
@-o-keyframes ani-rotateTube{
      0%{opaciteit:0; -o-transform:schaal(0) roteren(0); }
      35%{opaciteit:0; -o-transform:schaal(0) roteren(0); }
      40%{opaciteit:1; -o-transformatie:schaal(1) roteren(-360°); }
      60%{opacity:1; -o-transformatie:schaal(1) roteren(-360°); }
      100%{Opacity:1; -o-transformatie:schaal(1) roteren(-360°); }
}
.ani-schaduw{
      animatie: ani-shadow 20s lineair oneindig;
      -webkit-animatie: ani-shadow 20s lineair oneindig;
      -o-animatie: ani-schaduw 20s lineair oneindig;
}
@keyframes ani-shadow{
      0%{opaciteit:0; box-shadow: geen; }
      58%{opaciteit:0; box-shadow: geen; }
      64%{opaciteit: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%{opaciteit:0; box-shadow: geen; }
      100%{opaciteit:0; box-shadow: geen; }
}
@-webkit-keyframes ani-shadow{
      0%{opaciteit:0; box-shadow: geen; }
      58%{opaciteit:0; box-shadow: geen; }
      64%{opaciteit: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%{opaciteit:0; box-shadow: geen; }
      100%{opaciteit:0; box-shadow: geen; }
}
@-o-keyframes ani-shadow{
      0%{opaciteit:0; box-shadow: geen; }
      58%{opaciteit:0; box-shadow: geen; }
      64%{opaciteit: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%{opaciteit:0; box-shadow: geen; }
      100%{opaciteit:0; box-shadow: geen; }
}
.ani-smal, .ani-zoomen, .ani-roterenHaak,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
      animatie-vulmodus: vooruit;
      -webkit-animatie-vulmodus: beide;
      -o-animatie-vulmodus: beide;
}
</style>
</head>

<body>
<div class="container">
      <!-- linkeroog begint - >
<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="line">
            <div class="haak ani-rotateHook">
                     <spanklas="bar"><b></b></span>
                  <spanklas="bar"><b></b></span>
                  <spanklas="bar"><b></b></span>
            </div>
            <div class="tube ani-rotateTube">
                     <span klas="bar"></span>
                     <span klas="bar"></span>
                     <span klas="bar"></span>
            </div>
         </div>
      </div>
      <div class="trans skewLeft">
            <span klas="behalve ani-shadow"></span>
      </div>
</div>
      <!-- uiteinde van het linkeroog - >
<!-- het rechteroog begint - >
<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="line">
            <div class="haak ani-rotateHook">
                     <spanklas="bar"><b></b></span>
                  <spanklas="bar"><b></b></span>
                  <spanklas="bar"><b></b></span>
            </div>
            <div class="tube ani-rotateTube">
                     <span klas="bar"></span>
                     <span klas="bar"></span>
                     <span klas="bar"></span>
            </div>
         </div>
      </div>
      <div class="trans skewRight">
            <span klas="behalve ani-shadow"></span>
      </div>
</div>
      <!-- rechterooguiteinden - >
</div>
</body>
[/</html>mw_shl_code]

Ongeëvenaard in de wereld · Geplaatst op 14-11-2014 17:57:04

Dit bericht is voor het laatst bewerkt door Tianxia Wushuang op 14-11-2014 om 18:00

admin · Geplaatst op 14-11-2014 17:58:15

Goede dingen die ik eerst verzamelde

De temperatuur in de noordelijke stad is 22 graden · Geplaatst op 14-11-2014 21:53:23

Zoveel code voor één oog?

Ongeëvenaard in de wereld · Geplaatst op 14-11-2014 22:12:26

Beicheng Weaving Temperatuur 22 graden Geplaatst op 14-11-2014 21:53
Zoveel code voor één oog?

Het is niet alleen een oog! Als je het één keer online draait, weet je het

Zwartbuikpruim · Geplaatst op 14-11-2014 22:23:43

Het is geweldig, en er is ook het reïncarnatieoog

[CSS/DIV] CSS3 Sharingan maken (Animatie)

Partituur

Secties bekeken