表单标签动画（CSS）
2016-01-13 14:28
232 查看
搭建根基
我们同样使用了haml来简化html书写。<code class="language-haml来简化html书写 hljs haml has-numbering"
style="display: block; padding: 0px; color: inherit;
box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined;
white-space: pre; border-radius: 0px; word-wrap: normal;
background: transparent;">#container -<span class="ruby"
style="box-sizing: border-box;">(<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">1</span>..<span class="hljs-number"
style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>).each <span class="hljs-keyword"
style="color: rgb(0, 0, 136); box-sizing: border-box;">do</span> </span>
<span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;"> %<span class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);">div</span><span class="hljs-value" style="box-sizing: border-box;
color: rgb(0, 136, 0);">.row</span></span> <span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;"> %<span class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);">label</span></span> <span class="hljs-tag"
style="color: rgb(0, 102, 102); box-sizing: border-box;"> %<span class="hljs-title"
style="box-sizing: border-box; color: rgb(0, 0, 136);">input</span>{<span class="hljs-symbol" style="box-sizing: border-box;">:type</span>=><span class="hljs-string" style="color: rgb(0, 136, 0);
box-sizing: border-box;">"text"</span>}</span> <span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;"> %<span class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);">span</span></span>姓名 <span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;"> %<span class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);">label</span></span> <span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;"> %<span class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);">input</span>{<span class="hljs-symbol" style="box-sizing: border-box;">:type</span>=><span class="hljs-string"
style="color: rgb(0, 136, 0); box-sizing: border-box;">"text"</span>}</span>
<span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;"> %<span class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);">span</span></span>性别 <span class="hljs-tag"
style="color: rgb(0, 102, 102); box-sizing: border-box;"> %<span class="hljs-title"
style="box-sizing: border-box; color: rgb(0, 0, 136);">label</span></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;"> %<span class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);">input</span>{<span class="hljs-symbol" style="box-sizing: border-box;">:type</span>=><span class="hljs-string"
style="color: rgb(0, 136, 0); box-sizing: border-box;">"text"</span>}</span>
<span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;"> %<span class="hljs-title" style="box-sizing: border-box;
color: rgb(0, 0, 136);">span</span></span>邮箱</code><ul class="pre-numbering"
style="box-sizing: border-box; position: absolute; width: 50px;
top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px;
border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none;
text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box;
padding: 0px 5px;">1</li><li style="box-sizing: border-box;
padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box;
padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box;
padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box;
padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box;
padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>
css部分我们使用了scss，首先我们来搭建页面布局和基础设置。
<code class="language-scss hljs has-numbering" style="display: block;
padding: 0px; color: inherit; box-sizing: border-box;
font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;
background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0);
box-sizing: border-box;">/* 重置*/</span> *, *<span class="hljs-pseudo" style="color: rgb(0, 0, 0);
box-sizing: border-box;">:before</span>, *<span class="hljs-pseudo" style="color: rgb(0, 0, 0);
box-sizing: border-box;">:after</span> { <span class="hljs-attribute" style="box-sizing: border-box;">box-sizing</span><span class="hljs-value"
style="box-sizing: border-box;">: border-box;</span> } <span class="hljs-comment" style="color: rgb(136, 0, 0);
box-sizing: border-box;">/*容器设置*/</span> <span class="hljs-id"
style="box-sizing: border-box;">#container</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">counter-reset</span><span class="hljs-value"
style="box-sizing: border-box;">: counterA;</span> } <span class="hljs-comment"
style="color: rgb(136, 0, 0); box-sizing: border-box;">/*布局实现*/</span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">div</span>
<span class="hljs-class" style="box-sizing: border-box;">.row</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">position</span><span class="hljs-value"
style="box-sizing: border-box;">: relative;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">width</span><span class="hljs-value"
style="box-sizing: border-box;">: <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">100</span>%;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">height</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">20</span>vw;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">padding-left</span><span class="hljs-value" s
tyle="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">15</span>vw;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">counter-increment</span><span class="hljs-value"
style="box-sizing: border-box;">: counterA;</span> &<span class="hljs-pseudo" style="color: rgb(0, 0, 0);
box-sizing: border-box;">:before</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">content</span><span class="hljs-value" style="box-sizing: border-box;">:counter(counterA);</span> <span class="hljs-attribute"
style="box-sizing: border-box;">color</span><span class="hljs-value"
style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">255</span>,.<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">05</span>);</span> <span class="hljs-attribute"
style="box-sizing: border-box;">font-size</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">10</span>vw;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">position</span><span class="hljs-value"
style="box-sizing: border-box;">: absolute;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">left</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span>px;</span> } <span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;">label</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">position</span><span class="hljs-value"
style="box-sizing: border-box;">: relative;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">display</span><span class="hljs-value" style="box-sizing: border-box;">: block;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">float</span><span class="hljs-value"
style="box-sizing: border-box;">: left;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">margin</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">8</span>vw <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">2</span>vw;</span> <span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;">input</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">width</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">160</span>px;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">height</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">30</span>px;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">line-height</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">30</span>px;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">background</span><span class="hljs-value"
style="box-sizing: border-box;">: rgba(<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">255</span>,.<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">1</span>);</span> <span class="hljs-attribute"
style="box-sizing: border-box;">border</span><span class="hljs-value" style="box-sizing: border-box;">:none;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">outline</span><span class="hljs-value"
style="box-sizing: border-box;">:none;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">border</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">1</span>px solid <span class="hljs-hexcolor" style="color: rgb(0, 102, 102);
box-sizing: border-box;">#fff</span>;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">color</span><span class="hljs-value"
style="box-sizing: border-box;">: <span class="hljs-hexcolor" style="color: rgb(0, 102, 102);
box-sizing: border-box;">#377D6A</span>;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">padding</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">10</span>px;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">border-radius</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">4</span>px;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">text-indent</span><span class="hljs-value"
style="box-sizing: border-box;">: <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">38</span>px;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">transition</span><span class="hljs-value"
style="box-sizing: border-box;">: all .<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">3</span>s ease-in-out;</span> <span class="hljs-value"
style="box-sizing: border-box;">
::-webkit-input-placeholder {
color: transparent;</span>
}
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">position</span><span class="hljs-value" style="box-sizing: border-box;">: absolute;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">left</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span>;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">top</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span>;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">color</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-hexcolor" style="color: rgb(0, 102, 102);
box-sizing: border-box;">#fff</span>;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">background</span><span class="hljs-value"
style="box-sizing: border-box;">: <span class="hljs-hexcolor" style="color: rgb(0, 102, 102);
box-sizing: border-box;">#7AB893</span>;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">display</span><span class="hljs-value"
style="box-sizing: border-box;">: inline-block;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">padding</span><span class="hljs-value"
style="box-sizing: border-box;">: <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">7</span>px <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">4</span>px;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">transform-origin</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0);
box-sizing: border-box;">:left</span> <span class="hljs-value" style="box-sizing: border-box;">center</span>;
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value"
style="box-sizing: border-box;">: perspective(<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">300</span>px);</span> <span class="hljs-attribute"
style="box-sizing: border-box;">transition</span><span class="hljs-value"
style="box-sizing: border-box;">: all .<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">3</span>s ease-in-out;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">border-radius</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">4</span>px;</span> } } <span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0);
box-sizing: border-box;">:focus</span>, <span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0);
box-sizing: border-box;">:active</span> {
<span class="hljs-attribute" style="box-sizing: border-box;">text-indent</span><span class="hljs-value"
style="box-sizing: border-box;">: <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span>;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">background</span><span class="hljs-value"
style="box-sizing: border-box;">: rgba(<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">255</span>,.<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">2</span>);</span> <span class="hljs-value"
style="box-sizing: border-box;">::-webkit-input-placeholder {
color: <span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#f00</span>;</span> } +<span class="hljs-tag"
style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value"
style="box-sizing: border-box;">: darken(<span class="hljs-hexcolor"
style="color: rgb(0, 102, 102); box-sizing: border-box;">#7AB893</span>,<span class="hljs-number"
style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>%);</span> } } }
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*设置背景色，随机颜色*/</span>
<span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword"
style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> $i<span class="hljs-preprocessor"
style="color: rgb(68, 68, 68); box-sizing: border-box;"> from</span><span class="hljs-preprocessor"
style="color: rgb(68, 68, 68); box-sizing: border-box;"> 1</span><span class="hljs-preprocessor"
style="color: rgb(68, 68, 68); box-sizing: border-box;"> through</span><span class="hljs-preprocessor"
style="color: rgb(68, 68, 68); box-sizing: border-box;"> 15</span>{</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(#{$<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">i</span>}){
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value"
style="box-sizing: border-box;">:hsl(random(<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">360</span>),<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">60</span>%,<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">30</span>%);</span> } } <span class="hljs-comment"
style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置每一行的动画效果</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0);
box-sizing: border-box;">//&:nth-child(1){}</span>
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px;
border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none;
text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box;
padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li>
<li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box;
padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li>
<li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box;
padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li>
<li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box;
padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li>
<li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box;
padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li>
<li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box;
padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li>
<li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box;
padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li>
<li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box;
padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li>
<li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box;
padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li>
<li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box;
padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li>
<li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box;
padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li>
<li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box;
padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li>
<li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box;
padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li>
<li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box;
padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li>
<li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box;
padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li>
<li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box;
padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box;
padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box;
padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li>
<li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box;
padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li>
<li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box;
padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box;
padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box;
padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box;
padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box;
padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box;
padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box;
padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box;
padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box;
padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box;
padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box;
padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box;
padding: 0px 5px;">78</li></ul>
效果一
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box;
font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;
background: transparent;">
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置每一行的动画效果</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//&:nth-child(1){}</span><span class="hljs-comment" style="color: rgb(136, 0, 0);
box-sizing: border-box;">//效果一，标签左移</span> &<span class="hljs-pseudo" style="color: rgb(0, 0, 0);
box-sizing: border-box;">:nth-child</span>(1){
<span class="hljs-tag" style="color: rgb(0, 102, 102);box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0);
box-sizing: border-box;">:focus</span>, <span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0);
box-sizing: border-box;">:active</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span>;</span> +<span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">4</span>px;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">transform</span><span class="hljs-value"
style="box-sizing: border-box;">: translateX(-<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">100</span>%);</span> } } }</code><ul class="pre-numbering" style="box-sizing: border-box;
position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px;
border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;
background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li>
<li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box;
padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box;
padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box;
padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box;
padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box;
padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box;
padding: 0px 5px;">13</li></ul>
效果二
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box;
font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;
background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0);
box-sizing: border-box;">//效果二，标签右移</span> &<span class="hljs-pseudo" style="color: rgb(0, 0, 0);
box-sizing: border-box;">:nth-child</span>(2){
<span class="hljs-tag" style="color: rgb(0, 102, 102);box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0);
box-sizing: border-box;">:focus</span>, <span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0);
box-sizing: border-box;">:active</span>{
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value"
style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span>;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">transform</span><span class="hljs-value"
style="box-sizing: border-box;">: translateX(<span class="hljs-number"
style="color: rgb(0, 102, 102); box-sizing: border-box;">300</span>%);</span> } } }</code>
<ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px;
margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid;
border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;
background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box;
padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box;
padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box;
padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box;
padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box;
padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>
效果三
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit;
box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre;
border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment"
style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果三，标签上移</span> &<span class="hljs-pseudo"
style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(3){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo"
style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>, <span class="hljs-tag"
style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo"
style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">text-indent</span><span class="hljs-value"
style="box-sizing: border-box;">: <span class="hljs-number" style="color: rgb(0, 102, 102);
box-sizing: border-box;">0</span>px;</span> +<span class="hljs-tag" style="color: rgb(0, 102, 102);
box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background-color</span><span class="hljs-value"
style="box-sizing: border-box;">: transparent;</span> <span class="hljs-attribute"
style="box-sizing: border-box;">transform</span><span class="hljs-value"
style="box-sizing: border-box;">: translateY(-<span class="hljs-number"
style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>%);</span> } } }</code>
<ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px;
margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid;
border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;
background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>
效果四
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果四，标签下移</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(4){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>,
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">text-indent</span><span class="hljs-value" style="box-sizing: border-box;">: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>px;</span> +<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background-color</span><span class="hljs-value" style="box-sizing: border-box;">: transparent;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">: translateY(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>%);</span> } } }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>
效果五
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果五，标签上旋</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(5){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span>+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">transform-origin</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:left</span> <span class="hljs-attribute" style="box-sizing: border-box;">bottom</span>;
}
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>,
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">text-indent</span><span class="hljs-value" style="box-sizing: border-box;">: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>px;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">: rotate(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span>deg);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
}
}
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>
效果六
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果六，标签下旋</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(6){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span>+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">transform-origin</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:left</span> <span class="hljs-attribute" style="box-sizing: border-box;">bottom</span>;
}
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>,
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">animation</span><span class="hljs-value" style="box-sizing: border-box;">:swing <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>s;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">animation-fill-mode</span><span class="hljs-value" style="box-sizing: border-box;">: forwards;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
}
}
}
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//第6个动画</span>
<span class="hljs-at_rule" style="box-sizing: border-box;">@keyframes<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;"> swing</span>{</span>
0% {
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">: rotate(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);</span>
}
20% {
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">: rotate(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">116</span>deg);</span>
}
40% {
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">: rotate(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span>deg);</span>
}
60% {
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">: rotate(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">98</span>deg);</span>
}
80% {
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">: rotate(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">76</span>deg);</span>
}
100% {
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">: rotate(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">82</span>deg);</span>
}
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li></ul>
效果七
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果七，标签左折</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(7){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span>+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">transform-origin</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:right</span> <span class="hljs-value" style="box-sizing: border-box;">center</span>;
}
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>,
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:perspective(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">300</span>px) translateX(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>%) rotateY(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span>deg);</span>
}
}
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>
效果八
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果八，标签左翻</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(8){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>,
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">: rotateY(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">180</span>deg);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
}
}
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>
效果九
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果九，标签上移变提示框</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(9){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span>{
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">: transparent;</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:before</span>{ <span class="hljs-attribute" style="box-sizing: border-box;">content</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">width</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">height</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">position</span><span class="hljs-value" style="box-sizing: border-box;">: absolute;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">left</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>px;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">bottom</span><span class="hljs-value" style="box-sizing: border-box;">:-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>px;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>px solid <span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#000</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-color</span><span class="hljs-value" style="box-sizing: border-box;">:darken(<span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#7AB893</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>%) transparent transparent transparent;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">transition</span><span class="hljs-value" style="box-sizing: border-box;">:all .<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>s;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">opacity</span><span class="hljs-value" style="box-sizing: border-box;">: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
}
}
}
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>,
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">padding</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>px;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>px;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:translateY(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">150</span>%);</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:before</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">opacity</span><span class="hljs-value" style="box-sizing: border-box;">: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;</span>
}
}
}
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li></ul>
效果十
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果十，标签上移，框变色</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(10){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-width</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">: transparent;</span>
}
}
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>,
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-width</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-color</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#000</span>;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">:transparent;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:translateY(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">120</span>%);</span>
}
}
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul>
效果十一
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果十一，标签左弹性</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(11){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-width</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">: transparent;</span>
}
}
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>,
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">:transparent;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>px solid <span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#fff</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-width</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>px;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">animation</span><span class="hljs-value" style="box-sizing: border-box;">:halfLeft .<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>s ease-in;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">animation-fill-mode</span><span class="hljs-value" style="box-sizing: border-box;">: forwards;</span>
}
}
<span class="hljs-at_rule" style="box-sizing: border-box;">@keyframes<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;"> halfLeft</span>{</span>
20%{
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:translateX(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span>%);</span>
}
40%{
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:translateX(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">42</span>%);</span>
}
60%{
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:translateX(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">56</span>%);</span>
}
80%{
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:translateX(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">46</span>%);</span>
}
100%{
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:translateX(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>%);</span>
}
}
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li></ul>
效果十二
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果十二，横线上移</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(12){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-width</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">:transparent;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">: transparent;</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:before</span>{ <span class="hljs-attribute" style="box-sizing: border-box;">content</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">width</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">160</span>px;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">height</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>px;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">background-color</span><span class="hljs-value" style="box-sizing: border-box;">: <span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#fff</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">position</span><span class="hljs-value" style="box-sizing: border-box;">: absolute;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">left</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">bottom</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
}
}
}
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>,
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">:transparent;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:translateY(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>%);</span> } } }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li></ul>
效果十三
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果十三，边框动画</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(13){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>px solid <span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#fff</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-top-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-right-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-bottom-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-left-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">:transparent;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">: transparent;</span>
}
}
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>,
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">transition</span><span class="hljs-value" style="box-sizing: border-box;">:none;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">animation</span><span class="hljs-value" style="box-sizing: border-box;">:borderAnim <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>s;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">animation-fill-mode</span><span class="hljs-value" style="box-sizing: border-box;">:forward;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>px solid <span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#fff</span>;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">:transparent;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:translateY(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>%);</span>
}
}
}
<span class="hljs-at_rule" style="box-sizing: border-box;">@keyframes<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;"> borderAnim</span>{</span>
25%{
<span class="hljs-attribute" style="box-sizing: border-box;">border-top-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-right-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-bottom-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-left-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);</span>
}
50%{
<span class="hljs-attribute" style="box-sizing: border-box;">border-top-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-right-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-bottom-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-left-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);</span>
}
75%{
<span class="hljs-attribute" style="box-sizing: border-box;">border-top-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-right-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-bottom-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border-left-color</span><span class="hljs-value" style="box-sizing: border-box;">:rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);</span>
}
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li></ul>
效果十四
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果十四，前后立体变化</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(14){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>px solid <span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#fff</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">transform-origin</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:left</span> <span class="hljs-value" style="box-sizing: border-box;">center</span>;
<span class="hljs-attribute" style="box-sizing: border-box;">color</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#fff</span>;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">: transparent;</span>
}
}
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>,
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:scale(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.2</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">box-shadow</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>px <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>px <span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#000</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">color</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#fff</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>px solid <span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#fff</span>;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">:transparent;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:translateY(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>%) scale(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.8</span>);</span>
}
}
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li></ul>
效果十五
<code class="language-scss hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//效果十五，背景条纹动画</span>
&<span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child</span>(15){
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">border</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>px solid <span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#fff</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">background-color</span><span class="hljs-value" style="box-sizing: border-box;">: <span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#026873</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">background-image</span><span class="hljs-value" style="box-sizing: border-box;">: linear-gradient(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">90</span>deg, rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,.<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">07</span>) <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>%, transparent <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>%),
linear-gradient(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">90</span>deg, rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,.<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">13</span>) <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>%, transparent <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>%),
linear-gradient(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">90</span>deg, transparent <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>%, rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,.<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">17</span>) <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>%),
linear-gradient(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">90</span>deg, transparent <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>%, rgba(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>,.<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">19</span>) <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>%);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">background-size</span><span class="hljs-value" style="box-sizing: border-box;">: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">13</span>px, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">29</span>px, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">37</span>px, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">53</span>px;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">animation</span><span class="hljs-value" style="box-sizing: border-box;">: shadowGo <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>s linear infinite;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">animation-play-state</span><span class="hljs-value" style="box-sizing: border-box;">:running;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">: transparent;</span>
}
}
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:focus</span>,
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">input</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:active</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">background-color</span><span class="hljs-value" style="box-sizing: border-box;">: <span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#137884</span>;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">background-size</span><span class="hljs-value" style="box-sizing: border-box;">: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">13</span>px, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">29</span>px, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">37</span>px, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">53</span>px;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">animation-play-state</span><span class="hljs-value" style="box-sizing: border-box;">:paused;</span>
+<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">span</span>{
<span class="hljs-attribute" style="box-sizing: border-box;">transform</span><span class="hljs-value" style="box-sizing: border-box;">:translateY(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>%) scale(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.8</span>);</span>
<span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">:transparent;</span>
<span class="hljs-attribute" style="box-sizing: border-box;">color</span><span class="hljs-value" style="box-sizing: border-box;">:<span class="hljs-hexcolor" style="color: rgb(0, 102, 102); box-sizing: border-box;">#137884</span>;</span>
}
}
}
<span class="hljs-at_rule" style="box-sizing: border-box;">@keyframes<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;"> shadowGo</span>{</span>
0% {<span class="hljs-attribute" style="box-sizing: border-box;">background-position</span><span class="hljs-value" style="box-sizing: border-box;">: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>}
<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>% {background-position: -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">600</span>% <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>%}
};</span> </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li></ul>十五种动画效果，希望可以对您有所帮助
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS+DIV之强化background属性
- CSS中强大的EM
- CSS值得关注的那些事？
- CSS值得关注的那些事？
- css3 中的filter使用
- wpf 样式继承
- Css
- 【HTML打卡】0113 div布局，css控制
- CSS 垂直居中问题总结
- 纯CSS3实现自定义涂鸦风格的边框
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
- CSS 样式修改 积累
- TabHost(系统自带样式)
- 从$('li').filter(':even').css('background-color', 'red');说起
- chrome查看hover样式方法
- animate.css css3动画工具
- 五,JavaWeb简略的谈下前端技术<二>CSS层叠样式表
- CSS 简介
- CSS 语法
- CSS Id 和 Class