减小字体
增大字体- ·上一篇文章：【RxSwift系列】RxSwift下如何实现基于MJRefresh的上下拉刷新？
- ·下一篇文章：node.js环境变量配置
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容
CSS3 单选框动画特效
-->
本文章的内容来自极客学院
1 | HTML5 |
系列课程，有兴趣的同学可以去观看视屏，个人感觉极客学院的视屏质量还是比较高的。好了，废话不多说了，下面来介绍主要内容。
Action one
首先，来看一下我们的第一个特效
demo2.gif
注意，这个地方的黄点不是我们特效的一部分，这个黄点之所以存在是我使用的屏幕录制软件自带的。可以很清楚的看到这个特效就是当我们点击的时候，黑点会以一种缩放的动画显示出来，下面来看看具体如何实现。
1 | HTML |
代码
2
3
4
5
6
7
8
9
10
<input <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"radio"</span> name=<span class="hljs-string">"radio-1"</span> id=<span class="hljs-string">"radio-1-1"</span> checked=<span class="hljs-string">"checked"</span>>
<label <span class="hljs-keyword">for</span>=<span class="hljs-string">"radio-1-1"</span>></label>
<input <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"radio"</span> name=<span class="hljs-string">"radio-1"</span> id=<span class="hljs-string">"radio-1-2"</span>>
<label <span class="hljs-keyword">for</span>=<span class="hljs-string">"radio-1-2"</span>></label>
<input <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"radio"</span> name=<span class="hljs-string">"radio-1"</span> id=<span class="hljs-string">"radio-1-3"</span>>
<label <span class="hljs-keyword">for</span>=<span class="hljs-string">"radio-1-3"</span>></label>
</div>
这里，我们指定
1 | input |
标签的
1 | type |
值为
1 | radio |
，并且一下所有的
1 | radio |
的
1 | name |
值都相同，这样才可以实现单选效果。对于这里的
1 | label |
中的
1 | for |
属性，为什么这么设置一开始我也不明白，后来搜索了一下这个属性的定义，反正大概的意思就是说，只要设置了这个属性，当我们点击
1 | label |
元素的时候，浏览器会自动把焦点转移到
1 | radio |
上去。下面用
1 | CSS |
对
1 | HTML |
设置效果。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">900px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">3%</span> <span class="hljs-number">0%</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">10px</span> auto</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> darkseagreen</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
}</span>
<span class="hljs-class">.radio-1</span> <span class="hljs-tag">label</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> inline-block</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> relative</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">28px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">28px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid <span class="hljs-hexcolor">#cccccc</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">100%</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">cursor</span>:<span class="hljs-value"> pointer</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#ffffff</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-number">10px</span></span></span>;
}</span>
这里我们首先看一下对
1 | label |
元素的设定，其中大部分属性我都在以前的文章中介绍过了，唯一一个陌生的属性就是
1 | cursor |
，这个属性是设定鼠标样式的，设置成
1 | pointer |
之后，当我们的鼠标放到
1 | label |
元素上时，鼠标样式就变成了一只手（在我电脑上是这样）。好了，下面继续来看
2
3
4
5
6
7
8
9
10
11
12
content: <span class="hljs-string">""</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> absolute</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">20px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">20px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">top</span>:<span class="hljs-value"> <span class="hljs-number">4px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">left</span>:<span class="hljs-value"> <span class="hljs-number">4px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#666</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">50%</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scale</span>(<span class="hljs-number">0</span>)</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transition</span>:<span class="hljs-value"> transform .<span class="hljs-number">2s</span> ease-out</span></span>;
}
这里我们用到了
1 | after |
选择器，为什么设置这个属性？就是为了设置如上图所示的小黑点。首先我们设置
1 | content |
属性为空，意思就是我们不需要填充任何内容，因为我们只是想设置背景色为黑色，仅此而已。还有，刚开始的时候我们设置
1 | transform |
的
1 | scale |
值为
1 | 0 |
，其达到的效果就是将小黑点隐藏。
2
3
4
5
6
7
8
9
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#eeeeee</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transition</span>:<span class="hljs-value"> background-color .<span class="hljs-number">2s</span> ease-in</span></span>;
}</span>
<span class="hljs-class">.radio-1</span> <span class="hljs-attr_selector">[type="radio"]</span><span class="hljs-pseudo">:checked</span> + <span class="hljs-rule"><span class="hljs-attribute">label</span>:<span class="hljs-value">after {
transform: <span class="hljs-function">scale</span>(<span class="hljs-number">1</span>)</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transition</span>:<span class="hljs-value"> transform .<span class="hljs-number">2s</span> ease-in</span></span>;
}
注意这里使用了
1 | + |
符号，是什么意思呢？它的学名叫做
1 | 相邻同胞选择器 |
，意思就是选择紧接在另一个元素后的元素，而且二者有相同的父元素，在这里的意思就是选中在
1 | radio |
后出现的
1 | label |
，有人要问了，这么设置干嘛，直接设置
1 | label |
就是了。想象一下，在一个 非常庞大的系统中，我们可能多次使用到
1 | label |
元素，为了避免混淆，这样设置将更加准确。这里我们看到了
1 | transition |
属性，这个属性是用于设置过渡效果的。最后，将我们的
1 | radio |
隐藏掉，就大功告成了。
2
3
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> none</span></span>;
}</span>
Action two
这是我们的第二个特效
demo2.gif
其实看到这个动画的第一感觉就是，和上一个一模一样，除了将
1 | transform |
属性设置成
1 | rotate |
，下面我就不再解释了，只要你结合上一个例子，就可以很容易做出这么一个效果，我们直接上代码
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>Radio<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<span class="hljs-tag"><<span class="hljs-title">style</span>></span><span class="css">
<span class="hljs-class">.radio-2</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">900px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">3%</span> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">50px</span> auto</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> darkseagreen</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
}</span>
<span class="hljs-class">.radio-2</span> <span class="hljs-tag">label</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> inline-block</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">28px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">28px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">overflow</span>:<span class="hljs-value"> hidden</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid <span class="hljs-hexcolor">#eeeeee</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">100%</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-number">10px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#ffffff</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> relative</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">cursor</span>:<span class="hljs-value"> pointer</span></span>;
}</span>
<span class="hljs-class">.radio-2</span> <span class="hljs-rule"><span class="hljs-attribute">label</span>:<span class="hljs-value">after {
content: <span class="hljs-string">""</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> absolute</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">top</span>:<span class="hljs-value"> <span class="hljs-number">4px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">left</span>:<span class="hljs-value"> <span class="hljs-number">4px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">20px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">20px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#666666</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">50%</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">rotate</span>(-<span class="hljs-number">180deg</span>)</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> -<span class="hljs-number">2px</span> <span class="hljs-number">50%</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transition</span>:<span class="hljs-value"> transform .<span class="hljs-number">2s</span> ease-in</span></span>;
}
<span class="hljs-class">.radio-2</span> <span class="hljs-attr_selector">[type="radio"]</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> none</span></span>;
}</span>
<span class="hljs-class">.radio-2</span> <span class="hljs-attr_selector">[type="radio"]</span><span class="hljs-pseudo">:checked</span> + <span class="hljs-rule"><span class="hljs-attribute">label</span>:<span class="hljs-value">after{
transform: <span class="hljs-function">rotate</span>(<span class="hljs-number">0deg</span>)</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transition</span>:<span class="hljs-value"> transform .<span class="hljs-number">2s</span> ease-out</span></span>;
}
</span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"radio-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"radio-2"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"radio-2-1"</span> <span class="hljs-attribute">checked</span>=<span class="hljs-value">"checked"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"radio-2-1"</span>></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"radio-2"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"radio-2-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"radio-2-2"</span>></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"radio-2"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"radio-2-3"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"radio-2-3"</span>></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
文／千里追风（简书作者）
原文链接：http://www.jianshu.com/p/cf5b4f6b0b68
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
原文链接：http://www.jianshu.com/p/cf5b4f6b0b68
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
CSS3 单选框动画特效
