用CSS实现带动画效果的单选框
预览一下效果：http://39.105.101.122/myhtml/CSS/singlebox2/singleRadio.html
布局结构为：
1 <div class="radio-1">
2 <input type="radio" name="radio-1" id="radio-1-1" checked="checked">
3 <label for="radio-1-1"></label>
4
5 <input type="radio" name="radio-1" id="radio-1-2">
6 <label for="radio-1-2"></label>
7
8 <input type="radio" name="radio-1" id="radio-1-3">
9 <label for="radio-1-3"></label>
10 </div>
type=“radio”定义单选按钮，label标签为 input 元素定义标注，把label标签的for属性设置为何input标签的id相同即可关联，当鼠标点击label的时候也会触发input。可以设置label的样式，隐藏input，当radio选中的时候，对应的label标签发生样式改变就可以。
label标签默认是不显示的，所以需要设置display属性为inline-block(行内块级元素，没有换行符)。
添加label的after，设置position为absolute，label的position为relative，after的大小位置设置好，添加transform: scale(0)缩小到看不到，然后当关联input选中（checked值是checked）的时候，再设置scale(1)，然后添加transition过渡属性。
在这里不需要用到js，当input选中的时候设置label属性可以这样写：
input:checked+label:after{
...
}
加号是相邻兄弟选择器（如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器）。这样当radio选中的时候，相对应的label标签的样式也会改变。
以上是一些需要注意的地方，其他的就是一些定位，颜色，宽度高度，边框属性了，这个可以自定义。
附上代码：
html:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <link href="singleRadio.css" rel="stylesheet" type="text/css">
7 </head>
8 <body>
9 <div class="radio-1">
10 <input type="radio" name="radio-1" id="radio-1-1" checked="checked">
11 <label for="radio-1-1"></label>
12
13 <input type="radio" name="radio-1" id="radio-1-2">
14 <label for="radio-1-2"></label>
15
16 <input type="radio" name="radio-1" id="radio-1-3">
17 <label for="radio-1-3"></label>
18 </div>
19 <div class="radio-2">
20 <input type="radio" name="radio-2" id="radio-2-1" checked="checked">
21 <label for="radio-2-1"></label>
22
23 <input type="radio" name="radio-2" id="radio-2-2">
24 <label for="radio-2-2"></label>
25
26 <input type="radio" name="radio-2" id="radio-2-3">
27 <label for="radio-2-3"></label>
28 </div>
29 </body>
30 </html>
CSS:
1 /**{*/
2 /*margin: 0;*/
3 /*padding: 0;*/
4 /*}*/
5 .radio-1{
6 width: 980px;
7 margin: 0 auto;
8 padding: 3% 0;
9 background-color: #3cc;
10 text-align: center;
11 }
12 .radio-1 input{
13 display: none;
14 }
15 .radio-1 label{
16 display: inline-block;
17 width: 28px;
18 height: 28px;
19 position: relative;
20 background-color: #ffffff;
21 border: 1px solid #cccccc;
22 margin-left: 10px;
23 border-radius: 100%;
24 cursor: pointer;
25 }
26 .radio-1 label:after{
27 width: 20px;
28 height: 20px;
29 top: 4px;
30 left: 4px;
31 position: absolute;
32 background-color: #666666;
33 border-radius: 100%;
34 content: "";
35 transform: scale(0);
36 transition: all .2s ease-in;
37 }
38 .radio-1 input:checked+label:after{
39 transform: scale(1);
40 transition: all .2s ease-in;
41 }
42 .radio-1 input:checked+label{
43 background-color: #eee;
44 transition: all .2s ease-out;
45 }
46 .radio-2{
47 width: 980px;
48 margin: 0 auto;
49 padding: 3% 0;
50 text-align: center;
51 background-color: #fc9;
52 }
53 .radio-2 input{
54 display: none;
55 }
56 .radio-2 label{
57 width: 28px;
58 height: 28px;
59 border: 1px solid #ccc;
60 border-radius: 50%;
61 overflow: hidden;
62 margin-left: 10px;
63 background-color: #fff;
64 display: inline-block;
65 position: relative;
66 cursor: pointer;
67 }
68 .radio-2 label:after{
69 content: "";
70 width: 20px;
71 height: 20px;
72 position: absolute;
73 top: 4px;
74 left: 4px;
75 border-radius: 40%;
76 background-color: #666666;
77 transform-origin: -2px 50%;
78 transform: rotate(-180deg);
79 transition: all .2s ease-out;
80 }
81 .radio-2 input:checked+label:after{
82 transform: rotate(0deg);
83 transition: all .2s ease-out;
84 }
85 .radio-2 input:checked+label{
86 background-color: #eee;
87 transition: all .2s ease-out;
88 }
用CSS实现带动画效果的单选框的更多相关文章
- 纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- android标题栏下面弹出提示框(一) TextView实现,带动画效果
产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板
这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...
- Android利用温度传感器实现带动画效果的电子温度计
概述 Android利用温度传感器实现带动画效果的电子温度计. 详细 代码下载:http://www.demodashi.com/demo/10631.html 一.准备工作 需要准备一部带有温度传感 ...
- 我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计
要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...
- /*带动画效果的hover*/
<!DOCTYPE html> /*带动画效果的hover*/ <html lang="en"> <head> <meta charset ...
- 带动画效果的jQuery手风琴
带动画效果的jQuery特效手风琴是一款带动画效果的手风琴作品,非常实用,可以用在新闻列表.FAQ等模块,默认的是打开第一个选项,查看其它的时候直接点击加号按钮就展开. 源码地址:http://www ...
- animate.css引入实现动画效果
最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...
随机推荐
- 一款针对EF Core轻量级分表分库、读写分离的开源项目
在项目开发中,如果数据量比较大,比如日志记录,我们往往会采用分表分库的方案:为了提升性能,把数据库查询与更新操作分开,这时候就要采用读写分离的方案. 分表分库通常包含垂直分库.垂直分表.水平分库和水平 ...
- Hive 和 Spark 分区策略剖析
作者:vivo 互联网搜索团队- Deng Jie 随着技术的不断的发展,大数据领域对于海量数据的存储和处理的技术框架越来越多.在离线数据处理生态系统最具代表性的分布式处理引擎当属Hive和Spark ...
- 二进制安装Kubernetes（k8s） v1.24.0 IPv4/IPv6双栈 （三主俩从）
二进制安装Kubernetes(k8s) v1.24.0 IPv4/IPv6双栈 (三主俩从) Kubernetes 开源不易,帮忙点个star,谢谢了 介绍 kubernetes二进制安装 后续尽可 ...
- [Linux/Apache Http]Apache Http(d)服务访问时报: 403 Forbidden You don't have permission to access /cdh/ on this server.
1 问题描述 http错误代码403:403 Forbidden 资源不可用.服务器理解客户的请求,但拒绝处理它.通常由于服务器上文件或目录的权限设置导致. 2 解决思路 胜利的果实: 确保关闭sel ...
- [Java SE]javac编译时编码错误
1 问题复现 Information:java: javacTask: 源发行版 8 需要目标发行版 1.8 Information:java: Errors occurred while compi ...
- Nucleistudio+Vivado协同仿真教程
创建Vivado工程 1.创建工程: 在Vivado中创建工程,命名随意,路径随意: 2.配置工程: 这里可以选择是否添加源文件等,我们先不添加: 3.选择FPGA核心: 选择MCU200T对应的FP ...
- Restless API 与 Restful API
Restful API: 1.CURD(增删改查) 由请求方式决定 2.请求方式有:get/post/delete/put 3.同一个路径可以进行多个操作 Restless API 1.CURD(增 ...
- LAL v0.35.4发布，OBS支持RTMP H265推流，我跟了
Go语言流媒体开源项目 LAL 今天发布了v0.35.4版本. LAL 项目地址:https://github.com/q191201771/lal 老规矩,简单介绍一下: ▦ 一. OBS支持RTM ...
- 可视化大屏：mapbox+vue全攻略
如题图,mapbox是一个支持真3D地形展示的webGIS框架,与常用的Leaflet.Cesium和Openlayers并称四大框架,本文将介绍mapbox-gl js 在 vue 中的用法. 为什 ...
- 带你了解关于FastAPI快速开发Web API项目中的模板和Jinja
摘要:FastAPI 实际上是为构建 API 和微服务而设计的.它可用于构建使用 Jinja 提供 HTML 服务的 Web 应用程序. 本文分享自华为云社区<FastAPI 快速开发 Web ...