纯css3制作写轮眼开眼及进化过程
- WBOY원래의
- 2016-05-26 15:25:323646검색
今天是火影忍者（漫画）宣告完结的日子，也是我首发的第一个随笔。看过火影的朋友都知道，写轮眼是什么，这里就不多说了。下面就直接展示整个效果，上张图，先睹为快：
目前已经测试 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>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：使用Echarts实现动态曲线图表다음 기사：png-24在ie6中的几种透明方法