Home > Article > Web Front-end > 纯css3制作写轮眼开眼及进化过程
纯css3制作写轮眼开眼及进化过程
- WBOYOriginal
- 2016-05-26 15:25:323688browse
今天是火影忍者（漫画）宣告完结的日子，也是我首发的第一个随笔。看过火影的朋友都知道，写轮眼是什么，这里就不多说了。下面就直接展示整个效果，上张图，先睹为快：
目前已经测试 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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：使用Echarts实现动态曲线图表Next article：png-24在ie6中的几种透明方法