Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-05-26 15:25:32
Original
3688 Leute haben es durchsucht

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

目前已经测试 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>
Nach dem Login kopieren
复制代码

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>
Nach dem Login kopieren
Verwandte Etiketten：
纯css3制作写轮眼开眼及进化过程
Quelle：php.cn
Vorheriger Artikel：使用Echarts实现动态曲线图表 Nächster Artikel：png-24在ie6中的几种透明方法
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
2
1861
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
10
2029
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1707
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1609
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1622
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage