简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  纯css3制作写轮眼开眼及进化过程

纯css3制作写轮眼开眼及进化过程

WBOY
WBOYOriginal
2016-05-26 15:25:323646Durchsuche

今天是火影忍者（漫画）宣告完结的日子，也是我首发的第一个随笔。看过火影的朋友都知道，写轮眼是什么，这里就不多说了。下面就直接展示整个效果，上张图，先睹为快：

目前已经测试 IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器（两种模式）兼容已通过。

温馨提示：以上浏览器版本号均最新的；动画过程中每个阶段大约会停留5秒钟，希望你不会中幻术^_^。

在线演示　　　　源码下载

 

HTML代码：

复制代码
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span>     <span style="color: #008000;"><!--</span><span style="color: #008000;">左眼开始</span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="eyesBoxs pullLeft"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="profile skewLeft"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="shadow skewLeft"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="basic ani-narrow"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="eyes ani-zoom"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span>             <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="line"</span><span style="color: #0000ff;">></span>           
<span style="color: #008080;"> 9</span>                 <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="hook ani-rotateHook"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span>                     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar"</span><span style="color: #0000ff;">><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span>                     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar"</span><span style="color: #0000ff;">><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span>                     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar"</span><span style="color: #0000ff;">><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span>                 <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span>                 <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="tube ani-rotateTube"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span>                     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span>                     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span>                     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span>                 <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">19</span>             <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">21</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="trans skewLeft"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">22</span>             <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar ani-shadow"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">23</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">24</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">25</span>     <span style="color: #008000;"><!--</span><span style="color: #008000;">左眼结束</span><span style="color: #008000;">--></span>
<span style="color: #008080;">27</span>     <span style="color: #008000;"><!--</span><span style="color: #008000;">右眼开始</span><span style="color: #008000;">--></span>
<span style="color: #008080;">28</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="eyesBoxs pullRight"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">29</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="profile skewRight"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">30</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="shadow skewRight"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">31</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="basic ani-narrow"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">32</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="eyes ani-zoom"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">33</span>             <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="line"</span><span style="color: #0000ff;">></span>           
<span style="color: #008080;">34</span>                 <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="hook ani-rotateHook"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">35</span>                     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar"</span><span style="color: #0000ff;">><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">36</span>                     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar"</span><span style="color: #0000ff;">><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">37</span>                     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar"</span><span style="color: #0000ff;">><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">38</span>                 <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">39</span>                 <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="tube ani-rotateTube"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">40</span>                     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">41</span>                     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">42</span>                     <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">43</span>                 <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">44</span>             <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">45</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">46</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="trans skewRight"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">47</span>             <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bar ani-shadow"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">48</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">49</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">50</span>     <span style="color: #008000;"><!--</span><span style="color: #008000;">右眼结束</span><span style="color: #008000;">--></span>
<span style="color: #008080;">51</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
复制代码

CSS代码：

<span style="color: #008080;">  1</span> <span style="color: #800000;">*</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0</span>;}
<span style="color: #008080;">  2</span> <span style="color: #800000;">.container</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">750px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;">30px auto</span>;<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;">relative</span>;}
<span style="color: #008080;">  3</span> <span style="color: #800000;">.eyesBoxs</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">130px</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">70px</span>;<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">absolute</span>;<span style="color: #ff0000;">top</span>:<span style="color: #0000ff;">50px</span>;}
<span style="color: #008080;">  4</span> <span style="color: #800000;">.pullLeft</span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">100px</span>;}
<span style="color: #008080;">  5</span> <span style="color: #800000;">.pullRight</span>{<span style="color: #ff0000;">right</span>:<span style="color: #0000ff;">100px</span>;}
<span style="color: #008080;">  6</span> <span style="color: #800000;">.profile</span>{
<span style="color: #008080;">  7</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">130px</span>;
<span style="color: #008080;">  8</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">70px</span>;
<span style="color: #008080;">  9</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;">#fff</span>;
<span style="color: #008080;"> 10</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;"> 11</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;"> 12</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;"> 13</span> <span style="color: #ff0000;">    overflow</span>:<span style="color: #0000ff;">hidden</span>;
<span style="color: #008080;"> 14</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">0 70px 0 50px</span>;
<span style="color: #008080;"> 15</span> }
<span style="color: #008080;"> 16</span> <span style="color: #800000;">.shadow</span>{
<span style="color: #008080;"> 17</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">block</span>;
<span style="color: #008080;"> 18</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">130px</span>;
<span style="color: #008080;"> 19</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">70px</span>;
<span style="color: #008080;"> 20</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;"> 21</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;"> 22</span> <span style="color: #ff0000;">    z-index</span>:<span style="color: #0000ff;">5</span>;
<span style="color: #008080;"> 23</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">0 90px 0 60px</span>;
<span style="color: #008080;"> 24</span> <span style="color: #ff0000;">    box-shadow</span>:<span style="color: #0000ff;">5px 12px 2px 5px rgba(0,0,0,.25) inset</span>;
<span style="color: #008080;"> 25</span> }
<span style="color: #008080;"> 26</span> <span style="color: #800000;">.skewLeft</span>{
<span style="color: #008080;"> 27</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;">skewX(15deg)</span>;
<span style="color: #008080;"> 28</span> <span style="color: #ff0000;">    -webkit-transform</span>:<span style="color: #0000ff;">skewX(15deg)</span>;
<span style="color: #008080;"> 29</span> <span style="color: #ff0000;">    -o-transform</span>:<span style="color: #0000ff;">skewX(15deg)</span>;
<span style="color: #008080;"> 30</span> }
<span style="color: #008080;"> 31</span> <span style="color: #800000;">.skewRight</span>{
<span style="color: #008080;"> 32</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;">skewX(-15deg) scale(-1,1)</span>;
<span style="color: #008080;"> 33</span> <span style="color: #ff0000;">    -webkit-transform</span>:<span style="color: #0000ff;">skewX(-15deg) scale(-1,1)</span>;
<span style="color: #008080;"> 34</span> <span style="color: #ff0000;">    -o-transform</span>:<span style="color: #0000ff;">skewX(-15deg) scale(-1,1)</span>;
<span style="color: #008080;"> 35</span> }
<span style="color: #008080;"> 36</span> <span style="color: #800000;">.basic</span>{
<span style="color: #008080;"> 37</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">60px</span>;
<span style="color: #008080;"> 38</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">60px</span>;
<span style="color: #008080;"> 39</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;">#000</span>;
<span style="color: #008080;"> 40</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;"> 41</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">50%</span>;
<span style="color: #008080;"> 42</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">50%</span>;
<span style="color: #008080;"> 43</span> <span style="color: #ff0000;">    z-index</span>:<span style="color: #0000ff;">10</span>;
<span style="color: #008080;"> 44</span> <span style="color: #ff0000;">    margin-top</span>:<span style="color: #0000ff;">-30px</span>;
<span style="color: #008080;"> 45</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">60%</span>;
<span style="color: #008080;"> 46</span> }
<span style="color: #008080;"> 47</span> <span style="color: #800000;">.basic:before</span>{
<span style="color: #008080;"> 48</span> <span style="color: #ff0000;">    content</span>:<span style="color: #0000ff;">""</span>;
<span style="color: #008080;"> 49</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">block</span>;
<span style="color: #008080;"> 50</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">10px</span>;
<span style="color: #008080;"> 51</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">11px</span>;
<span style="color: #008080;"> 52</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;"> 53</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">15px</span>;
<span style="color: #008080;"> 54</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">15px</span>;
<span style="color: #008080;"> 55</span> <span style="color: #ff0000;">    z-index</span>:<span style="color: #0000ff;">100</span>;
<span style="color: #008080;"> 56</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">60%</span>;
<span style="color: #008080;"> 57</span> <span style="color: #ff0000;">    background-image</span>:<span style="color: #0000ff;">radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3))</span>;
<span style="color: #008080;"> 58</span> <span style="color: #ff0000;">    -webkit-background-image</span>:<span style="color: #0000ff;">radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3))</span>;
<span style="color: #008080;"> 59</span> <span style="color: #ff0000;">    -o-background-image</span>:<span style="color: #0000ff;">radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3))</span>;
<span style="color: #008080;"> 60</span> }
<span style="color: #008080;"> 61</span> <span style="color: #800000;">.pullLeft .basic</span>{
<span style="color: #008080;"> 62</span> <span style="color: #ff0000;">    margin-left</span>:<span style="color: #0000ff;">-33px</span>;
<span style="color: #008080;"> 63</span> }
<span style="color: #008080;"> 64</span> <span style="color: #800000;">.pullRight .basic</span>{
<span style="color: #008080;"> 65</span> <span style="color: #ff0000;">    margin-left</span>:<span style="color: #0000ff;">-27px</span>;
<span style="color: #008080;"> 66</span> }
<span style="color: #008080;"> 67</span> <span style="color: #800000;">.eyes</span>{
<span style="color: #008080;"> 68</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">55px</span>;
<span style="color: #008080;"> 69</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">55px</span>;
<span style="color: #008080;"> 70</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;">#ff0000</span>;
<span style="color: #008080;"> 71</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;"> 72</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">8px</span>;
<span style="color: #008080;"> 73</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">60%</span>;
<span style="color: #008080;"> 74</span> <span style="color: #ff0000;">    box-shadow</span>:<span style="color: #0000ff;">0 0 2px 4px #bd0000 inset,0 0 0 2px #000</span>;
<span style="color: #008080;"> 75</span> }
<span style="color: #008080;"> 76</span> <span style="color: #800000;">.pullLeft .eyes</span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">35px</span>;}
<span style="color: #008080;"> 77</span> <span style="color: #800000;">.pullRight .eyes</span>{<span style="color: #ff0000;">right</span>:<span style="color: #0000ff;">35px</span>;}
<span style="color: #008080;"> 78</span> <span style="color: #800000;">.eyes .line</span>{
<span style="color: #008080;"> 79</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">64%</span>;
<span style="color: #008080;"> 80</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">64%</span>;
<span style="color: #008080;"> 81</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;">#ff0000</span>;
<span style="color: #008080;"> 82</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;"> 83</span> <span style="color: #ff0000;">    right</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;"> 84</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;"> 85</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">10px</span>;
<span style="color: #008080;"> 86</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;">0 auto</span>;
<span style="color: #008080;"> 87</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">60%</span>;
<span style="color: #008080;"> 88</span> <span style="color: #ff0000;">    box-shadow</span>:<span style="color: #0000ff;">0 0 2px 0 #b20000 inset</span>;
<span style="color: #008080;"> 89</span> }
<span style="color: #008080;"> 90</span> <span style="color: #800000;">.eyes .line:before</span>{
<span style="color: #008080;"> 91</span> <span style="color: #ff0000;">    content</span>:<span style="color: #0000ff;">""</span>;
<span style="color: #008080;"> 92</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">block</span>;
<span style="color: #008080;"> 93</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">10px</span>;
<span style="color: #008080;"> 94</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">11px</span>;
<span style="color: #008080;"> 95</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;"> 96</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">3px</span>;
<span style="color: #008080;"> 97</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">4px</span>;
<span style="color: #008080;"> 98</span> <span style="color: #ff0000;">    z-index</span>:<span style="color: #0000ff;">100</span>;
<span style="color: #008080;"> 99</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">60%</span>;
<span style="color: #008080;">100</span> <span style="color: #ff0000;">    background-image</span>:<span style="color: #0000ff;">radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3))</span>;
<span style="color: #008080;">101</span> <span style="color: #ff0000;">    -webkit-background-image</span>:<span style="color: #0000ff;">radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3))</span>;
<span style="color: #008080;">102</span> <span style="color: #ff0000;">    -o-background-image</span>:<span style="color: #0000ff;">radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3))</span>;
<span style="color: #008080;">103</span> }
<span style="color: #008080;">104</span> <span style="color: #800000;">.eyes .line:after</span>{
<span style="color: #008080;">105</span> <span style="color: #ff0000;">    content</span>:<span style="color: #0000ff;">""</span>;
<span style="color: #008080;">106</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">block</span>;
<span style="color: #008080;">107</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">10px</span>;
<span style="color: #008080;">108</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">10px</span>;
<span style="color: #008080;">109</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">110</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;">#000</span>;
<span style="color: #008080;">111</span> <span style="color: #ff0000;">    right</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">112</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">-1px</span>;
<span style="color: #008080;">113</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">13px</span>;
<span style="color: #008080;">114</span> <span style="color: #ff0000;">    z-index</span>:<span style="color: #0000ff;">100</span>;
<span style="color: #008080;">115</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;">0 auto</span>;
<span style="color: #008080;">116</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">60%</span>;
<span style="color: #008080;">117</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;">rotate(150deg)</span>;
<span style="color: #008080;">118</span> <span style="color: #ff0000;">    -webkit-transform</span>:<span style="color: #0000ff;">rotate(150deg)</span>;
<span style="color: #008080;">119</span> <span style="color: #ff0000;">    -o-transform</span>:<span style="color: #0000ff;">rotate(150deg)</span>;
<span style="color: #008080;">120</span> <span style="color: #ff0000;">    animation</span>:<span style="color: #0000ff;">colour 20s ease-in infinite</span>;
<span style="color: #008080;">121</span> <span style="color: #ff0000;">    -webkit-animation</span>:<span style="color: #0000ff;">colour 20s ease-in infinite</span>;
<span style="color: #008080;">122</span> <span style="color: #ff0000;">    -o-animation</span>:<span style="color: #0000ff;">colour 20s ease-in infinite</span>;
<span style="color: #008080;">123</span> }
<span style="color: #008080;">124</span> <span style="color: #800000;">@keyframes colour</span>{
<span style="color: #008080;">125</span> <span style="color: #ff0000;">    0%{background</span>:<span style="color: #0000ff;">#000</span>;}
<span style="color: #008080;">126</span> <span style="color: #800000;">    35%</span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">#000</span>;}
<span style="color: #008080;">127</span> <span style="color: #800000;">    40%</span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">#f00</span>;}
<span style="color: #008080;">128</span> <span style="color: #800000;">    100%</span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">#f00</span>;}
<span style="color: #008080;">129</span> <span style="color: #800000;">}
</span><span style="color: #008080;">130</span> <span style="color: #800000;">@-webkit-keyframes colour</span>{
<span style="color: #008080;">131</span> <span style="color: #ff0000;">    0%{background</span>:<span style="color: #0000ff;">#000</span>;}
<span style="color: #008080;">132</span> <span style="color: #800000;">    35%</span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">#000</span>;}
<span style="color: #008080;">133</span> <span style="color: #800000;">    40%</span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">#f00</span>;}
<span style="color: #008080;">134</span> <span style="color: #800000;">    100%</span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">#f00</span>;}
<span style="color: #008080;">135</span> <span style="color: #800000;">}
</span><span style="color: #008080;">136</span> <span style="color: #800000;">@-o-keyframes colour</span>{
<span style="color: #008080;">137</span> <span style="color: #ff0000;">    0%{background</span>:<span style="color: #0000ff;">#000</span>;}
<span style="color: #008080;">138</span> <span style="color: #800000;">    35%</span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">#000</span>;}
<span style="color: #008080;">139</span> <span style="color: #800000;">    40%</span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">#f00</span>;}
<span style="color: #008080;">140</span> <span style="color: #800000;">    100%</span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">#f00</span>;}
<span style="color: #008080;">141</span> <span style="color: #800000;">}
</span><span style="color: #008080;">142</span> <span style="color: #008000;">/*</span><span style="color: #008000;">******三勾玉 开始******</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">143</span> <span style="color: #800000;">.hook</span>{
<span style="color: #008080;">144</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">92%</span>;
<span style="color: #008080;">145</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">92%</span>;
<span style="color: #008080;">146</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">147</span> <span style="color: #ff0000;">    right</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">148</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">149</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">5%</span>;
<span style="color: #008080;">150</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;">0 auto</span>;
<span style="color: #008080;">151</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">60%</span>;
<span style="color: #008080;">152</span> }
<span style="color: #008080;">153</span> <span style="color: #800000;">.hook .bar</span>{
<span style="color: #008080;">154</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">block</span>;
<span style="color: #008080;">155</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">100%</span>;
<span style="color: #008080;">156</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">100%</span>;
<span style="color: #008080;">157</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">158</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">159</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">160</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">60%</span>;
<span style="color: #008080;">161</span> }
<span style="color: #008080;">162</span> <span style="color: #800000;">.hook .bar b</span>{
<span style="color: #008080;">163</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">block</span>;
<span style="color: #008080;">164</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">8px</span>;
<span style="color: #008080;">165</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">8px</span>;
<span style="color: #008080;">166</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;">#000</span>;
<span style="color: #008080;">167</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">168</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">169</span> <span style="color: #ff0000;">    bottom</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">170</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">60%</span>;
<span style="color: #008080;">171</span> }
<span style="color: #008080;">172</span> <span style="color: #800000;">.hook .bar b:after</span>{
<span style="color: #008080;">173</span> <span style="color: #ff0000;">    content</span>:<span style="color: #0000ff;">""</span>;
<span style="color: #008080;">174</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">8px</span>;
<span style="color: #008080;">175</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">8px</span>;
<span style="color: #008080;">176</span> <span style="color: #ff0000;">    border-color</span>:<span style="color: #0000ff;">transparent transparent #000 transparent</span>;
<span style="color: #008080;">177</span> <span style="color: #ff0000;">    border-style</span>:<span style="color: #0000ff;">solid</span>;
<span style="color: #008080;">178</span> <span style="color: #ff0000;">    border-width</span>:<span style="color: #0000ff;">0 0 5px 0</span>;
<span style="color: #008080;">179</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">180</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">-1px</span>;
<span style="color: #008080;">181</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">-3px</span>;
<span style="color: #008080;">182</span> <span style="color: #ff0000;">    z-index</span>:<span style="color: #0000ff;">100</span>;
<span style="color: #008080;">183</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">0 0 0 70%</span>;
<span style="color: #008080;">184</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;">rotate(-75deg)</span>;
<span style="color: #008080;">185</span> <span style="color: #ff0000;">    -webkit-transform</span>:<span style="color: #0000ff;">rotate(-75deg)</span>;
<span style="color: #008080;">186</span> <span style="color: #ff0000;">    -o-transform</span>:<span style="color: #0000ff;">rotate(-75deg)</span>;
<span style="color: #008080;">187</span> }
<span style="color: #008080;">188</span> <span style="color: #800000;">.hook .bar:nth-child(1)</span>{
<span style="color: #008080;">189</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;">rotate(10deg)</span>;
<span style="color: #008080;">190</span> <span style="color: #ff0000;">    -webkit-transform</span>:<span style="color: #0000ff;">rotate(10deg)</span>;
<span style="color: #008080;">191</span> <span style="color: #ff0000;">    -o-transform</span>:<span style="color: #0000ff;">rotate(10deg)</span>;
<span style="color: #008080;">192</span> }
<span style="color: #008080;">193</span> <span style="color: #800000;">.hook .bar:nth-child(2)</span>{
<span style="color: #008080;">194</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;">rotate(130deg)</span>;
<span style="color: #008080;">195</span> <span style="color: #ff0000;">    -webkit-transform</span>:<span style="color: #0000ff;">rotate(130deg)</span>;
<span style="color: #008080;">196</span> <span style="color: #ff0000;">    -o-transform</span>:<span style="color: #0000ff;">rotate(130deg)</span>;
<span style="color: #008080;">197</span> }
<span style="color: #008080;">198</span> <span style="color: #800000;">.hook .bar:nth-child(3)</span>{
<span style="color: #008080;">199</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;">rotate(250deg)</span>;
<span style="color: #008080;">200</span> <span style="color: #ff0000;">    -webkit-transform</span>:<span style="color: #0000ff;">rotate(250deg)</span>;
<span style="color: #008080;">201</span> <span style="color: #ff0000;">    -o-transform</span>:<span style="color: #0000ff;">rotate(250deg)</span>;
<span style="color: #008080;">202</span> }
<span style="color: #008080;">203</span> <span style="color: #008000;">/*</span><span style="color: #008000;">******三勾玉 结束******</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">204</span> <span style="color: #008000;">/*</span><span style="color: #008000;">******万花筒 开始******</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">205</span> <span style="color: #800000;">.tube</span>{
<span style="color: #008080;">206</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">93%</span>;
<span style="color: #008080;">207</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">93%</span>;
<span style="color: #008080;">208</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">209</span> <span style="color: #ff0000;">    right</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">210</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">0px</span>;
<span style="color: #008080;">211</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">2px</span>;
<span style="color: #008080;">212</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;">0 auto</span>;
<span style="color: #008080;">213</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;">#000</span>;
<span style="color: #008080;">214</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">60%</span>;
<span style="color: #008080;">215</span> }
<span style="color: #008080;">216</span> <span style="color: #800000;">.tube .bar</span>{
<span style="color: #008080;">217</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">block</span>;
<span style="color: #008080;">218</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">10px</span>;
<span style="color: #008080;">219</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">20px</span>;
<span style="color: #008080;">220</span> <span style="color: #ff0000;">    border-style</span>:<span style="color: #0000ff;">solid</span>;
<span style="color: #008080;">221</span> <span style="color: #ff0000;">    border-width</span>:<span style="color: #0000ff;">0 0 0 10px</span>;
<span style="color: #008080;">222</span> <span style="color: #ff0000;">    border-color</span>:<span style="color: #0000ff;">transparent transparent transparent black</span>;
<span style="color: #008080;">223</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">224</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">100% 0 0 0</span>;
<span style="color: #008080;">225</span> }
<span style="color: #008080;">226</span> <span style="color: #800000;">.tube .bar:nth-child(1)</span>{
<span style="color: #008080;">227</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">-10px</span>;
<span style="color: #008080;">228</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">2px</span>;
<span style="color: #008080;">229</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;">rotate(-10deg)</span>;
<span style="color: #008080;">230</span> }
<span style="color: #008080;">231</span> <span style="color: #800000;">.tube .bar:nth-child(2)</span>{
<span style="color: #008080;">232</span> <span style="color: #ff0000;">    bottom</span>:<span style="color: #0000ff;">0px</span>;
<span style="color: #008080;">233</span> <span style="color: #ff0000;">    right</span>:<span style="color: #0000ff;">-10px</span>;
<span style="color: #008080;">234</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;">rotate(105deg)</span>;
<span style="color: #008080;">235</span> <span style="color: #ff0000;">    -webkit-transform</span>:<span style="color: #0000ff;">rotate(105deg)</span>;
<span style="color: #008080;">236</span> <span style="color: #ff0000;">    -o-transform</span>:<span style="color: #0000ff;">rotate(105deg)</span>;
<span style="color: #008080;">237</span> }
<span style="color: #008080;">238</span> <span style="color: #800000;">.tube .bar:nth-child(3)</span>{
<span style="color: #008080;">239</span> <span style="color: #ff0000;">    bottom</span>:<span style="color: #0000ff;">-3px</span>;
<span style="color: #008080;">240</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">-10px</span>;
<span style="color: #008080;">241</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;">rotate(235deg)</span>;
<span style="color: #008080;">242</span> <span style="color: #ff0000;">    -webkit-transform</span>:<span style="color: #0000ff;">rotate(235deg)</span>;
<span style="color: #008080;">243</span> <span style="color: #ff0000;">    -o-transform</span>:<span style="color: #0000ff;">rotate(235deg)</span>;
<span style="color: #008080;">244</span> }
<span style="color: #008080;">245</span> <span style="color: #008000;">/*</span><span style="color: #008000;">******万花筒 结束******</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">246</span> <span style="color: #008000;">/*</span><span style="color: #008000;">******轮回眼 开始******</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">247</span> <span style="color: #800000;">.trans</span>{
<span style="color: #008080;">248</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">130px</span>;
<span style="color: #008080;">249</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">70px</span>;
<span style="color: #008080;">250</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">251</span> <span style="color: #ff0000;">    overflow</span>:<span style="color: #0000ff;">hidden</span>;
<span style="color: #008080;">252</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">253</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">254</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">0 70px 0 50px</span>;
<span style="color: #008080;">255</span> }
<span style="color: #008080;">256</span> <span style="color: #800000;">.trans .bar</span>{
<span style="color: #008080;">257</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">block</span>;
<span style="color: #008080;">258</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">9px</span>;
<span style="color: #008080;">259</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">9px</span>;
<span style="color: #008080;">260</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;">#000</span>;
<span style="color: #008080;">261</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">262</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">50%</span>;
<span style="color: #008080;">263</span> <span style="color: #ff0000;">    z-index</span>:<span style="color: #0000ff;">2</span>;
<span style="color: #008080;">264</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;">-4px 0 0 -4px</span>;
<span style="color: #008080;">265</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">60%</span>;
<span style="color: #008080;">266</span> }
<span style="color: #008080;">267</span> <span style="color: #800000;">.trans .bar:after</span>{    
<span style="color: #008080;">268</span> <span style="color: #ff0000;">    content</span>:<span style="color: #0000ff;">""</span>;
<span style="color: #008080;">269</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">block</span>;
<span style="color: #008080;">270</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">11px</span>;
<span style="color: #008080;">271</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">12px</span>;
<span style="color: #008080;">272</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">273</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">-13px</span>;
<span style="color: #008080;">274</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;">-13px</span>;
<span style="color: #008080;">275</span> <span style="color: #ff0000;">    z-index</span>:<span style="color: #0000ff;">100</span>;
<span style="color: #008080;">276</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">60%</span>;
<span style="color: #008080;">277</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;">rgba(250,250,250,.85)</span>;
<span style="color: #008080;">278</span> }
<span style="color: #008080;">279</span> <span style="color: #800000;">.pullLeft .trans .bar</span>{
<span style="color: #008080;">280</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;">skewX(-15deg)</span>;
<span style="color: #008080;">281</span> <span style="color: #ff0000;">    -webkit-transform</span>:<span style="color: #0000ff;">skewX(-15deg)</span>;
<span style="color: #008080;">282</span> <span style="color: #ff0000;">    -o-transform</span>:<span style="color: #0000ff;">skewX(-15deg)</span>;
<span style="color: #008080;">283</span> }
<span style="color: #008080;">284</span> <span style="color: #800000;">.pullLeft .trans .bar</span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">48%</span>;}
<span style="color: #008080;">285</span> <span style="color: #800000;">.pullRight .trans .bar</span>{
<span style="color: #008080;">286</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;">skewX(-15deg) scale(-1,1)</span>;
<span style="color: #008080;">287</span> <span style="color: #ff0000;">    -webkit-transform</span>:<span style="color: #0000ff;">skewX(-15deg) scale(-1,1)</span>;
<span style="color: #008080;">288</span> <span style="color: #ff0000;">    -o-transform</span>:<span style="color: #0000ff;">skewX(-15deg) scale(-1,1)</span>;
<span style="color: #008080;">289</span> }
<span style="color: #008080;">290</span> <span style="color: #800000;">.pullRight .trans .bar</span>{<span style="color: #ff0000;">right</span>:<span style="color: #0000ff;">48%</span>;}
<span style="color: #008080;">291</span> <span style="color: #008000;">/*</span><span style="color: #008000;">******轮回眼 结束******</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">292</span> <span style="color: #800000;">.ani-narrow</span>{
<span style="color: #008080;">293</span> <span style="color: #ff0000;">    animation</span>:<span style="color: #0000ff;">ani-narrow 20s ease-out infinite</span>;
<span style="color: #008080;">294</span> <span style="color: #ff0000;">    -webkit-animation</span>:<span style="color: #0000ff;">ani-narrow 20s ease-out infinite</span>;
<span style="color: #008080;">295</span> <span style="color: #ff0000;">    -o-animation</span>:<span style="color: #0000ff;">ani-narrow 20s ease-out infinite</span>;
<span style="color: #008080;">296</span> }
<span style="color: #008080;">297</span> <span style="color: #800000;">@keyframes ani-narrow</span>{
<span style="color: #008080;">298</span> <span style="color: #ff0000;">    0%{opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">299</span> <span style="color: #800000;">    5%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">300</span> <span style="color: #800000;">    10%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">301</span> <span style="color: #800000;">    87%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">302</span> <span style="color: #800000;">    90%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">303</span> <span style="color: #800000;">    100%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">304</span> <span style="color: #800000;">}
</span><span style="color: #008080;">305</span> <span style="color: #800000;">@-webkit-keyframes ani-narrow</span>{
<span style="color: #008080;">306</span> <span style="color: #ff0000;">    0%{opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">307</span> <span style="color: #800000;">    5%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">308</span> <span style="color: #800000;">    10%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">309</span> <span style="color: #800000;">    87%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">310</span> <span style="color: #800000;">    90%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">311</span> <span style="color: #800000;">    100%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">312</span> <span style="color: #800000;">}
</span><span style="color: #008080;">313</span> <span style="color: #800000;">@-o-keyframes ani-narrow</span>{
<span style="color: #008080;">314</span> <span style="color: #ff0000;">    0%{opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">-o-transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">315</span> <span style="color: #800000;">    5%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">-o-transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">316</span> <span style="color: #800000;">    10%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">-o-transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">317</span> <span style="color: #800000;">    87%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">-o-transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">318</span> <span style="color: #800000;">    90%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">-o-transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">319</span> <span style="color: #800000;">    100%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">-o-transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">320</span> <span style="color: #800000;">}
</span><span style="color: #008080;">321</span> <span style="color: #800000;">.ani-zoom</span>{
<span style="color: #008080;">322</span> <span style="color: #ff0000;">    animation</span>:<span style="color: #0000ff;">ani-zoom 20s linear infinite</span>;
<span style="color: #008080;">323</span> <span style="color: #ff0000;">    -webkit-animation</span>:<span style="color: #0000ff;">ani-zoom 20s linear infinite</span>;
<span style="color: #008080;">324</span> <span style="color: #ff0000;">    -o-animation</span>:<span style="color: #0000ff;">ani-zoom 20s linear infinite</span>;
<span style="color: #008080;">325</span> }
<span style="color: #008080;">326</span> <span style="color: #800000;">@keyframes ani-zoom</span>{
<span style="color: #008080;">327</span> <span style="color: #ff0000;">    0%{opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">328</span> <span style="color: #800000;">    5%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">329</span> <span style="color: #800000;">    8%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">330</span> <span style="color: #800000;">    60%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">331</span> <span style="color: #800000;">    62%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">transform</span>:<span style="color: #0000ff;">scale(1.5)</span>;}
<span style="color: #008080;">332</span> <span style="color: #800000;">    100%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">333</span> <span style="color: #800000;">}
</span><span style="color: #008080;">334</span> <span style="color: #800000;">@-webkit-keyframes ani-zoom</span>{
<span style="color: #008080;">335</span> <span style="color: #ff0000;">    0%{opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">336</span> <span style="color: #800000;">    5%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">337</span> <span style="color: #800000;">    8%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">338</span> <span style="color: #800000;">    60%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;">scale(1)</span>;}
<span style="color: #008080;">339</span> <span style="color: #800000;">    62%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;">scale(1.5)</span>;}
<span style="color: #008080;">340</span> <span style="color: #800000;">    100%</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">341</span> <span style="color: #800000;">}
</span><span style="color: #008080;">342</span> <span style="color: #800000;">@-o-keyframes ani-zoom</span>{
<span style="color: #008080;">343</span> <span style="color: #ff0000;">    0%{opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">-o-transform</span>:<span style="color: #0000ff;">scale(0)</span>;}
<span style="color: #008080;">344</span> <span style="color: #800000;">    5%</span>{<span style="color: #ff0000;">o</span>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：使用Echarts实现动态曲线图表Nächster Artikel：png-24在ie6中的几种透明方法

In Verbindung stehende Artikel

Mehr sehen