预览一下效果：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实现带动画效果的单选框的更多相关文章

  1. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  2. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  3. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  4. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板

    这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...

  6. Android利用温度传感器实现带动画效果的电子温度计

    概述 Android利用温度传感器实现带动画效果的电子温度计. 详细 代码下载:http://www.demodashi.com/demo/10631.html 一.准备工作 需要准备一部带有温度传感 ...

  7. 我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计

    要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...

  8. /*带动画效果的hover*/

    <!DOCTYPE html> /*带动画效果的hover*/ <html lang="en"> <head> <meta charset ...

  9. 带动画效果的jQuery手风琴

    带动画效果的jQuery特效手风琴是一款带动画效果的手风琴作品,非常实用,可以用在新闻列表.FAQ等模块,默认的是打开第一个选项,查看其它的时候直接点击加号按钮就展开. 源码地址:http://www ...

  10. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

随机推荐

  1. 容器云平台监控告警体系（三）—— 使用Prometheus Operator部署并管理Prometheus Server

    1.概述 Prometheus Operator是一种基于Kubernetes的应用程序,用于管理Prometheus实例和相关的监控组件.它是由CoreOS开发的开源工具,旨在简化Prometheu ...

  2. 快速部署Ceph分布式高可用集群

    快速部署Ceph分布式高可用集群 Ceph简介 Ceph是一个PB,EB级别的分布式存储系统,可以提供文件存储,对象存储.和块存储,它可靠性高,易扩展,管理简便,其中对象存储和块存储可以和其他云平台集 ...

  3. pandas之使用自定义函数

    如果想要应用自定义的函数,或者把其他库中的函数应用到 Pandas 对象中,有以下三种方法: 1) 操作整个 DataFrame 的函数:pipe() 2) 操作行或者列的函数:apply() 3)  ...

  4. [Web Server]Tomcat调优之工作原理、线程池/连接池

    1 Tomcat 概述 Tomcat隶属于Apache基金会,是开源的轻量级Web应用服务器,使用非常广泛. 1.0 Tomcat 容器与原理 1.0.1 Tomcat组件构成 注意,如图所示,阴影部 ...

  5. sql计算众数及中位数

    众数 众数: 情况①:一组数据中,出现次数最多的数就叫这组数据的众数. 举例:1,2,3,3,4的众数是3. 情况② :如果有两个或两个以上个数出现次数都是最多的,那么这几个数都是这组数据的众数. 举 ...

  6. mysql数据库常见优化方法

    1,创建适当的索引(主键索引.唯一索引.普通索引.全文索引.空间索引). 2,对sql语句进行优化--->慢查询(explain). 3,使用分表技术(水平分表,垂直分表),分区技术. 4,读写 ...

  7. Linux redhat7.2 制作u盘问题总结

    Linux  redhat7.2  制作u盘问题总结 其实呢,觉得本来没必要写一篇关于装系统的文章,毕竟我觉得大多数搞it的人都会,比如win10.ubuntu做个启动盘啥的应该都会,但是说实在的今天 ...

  8. Html/css 列表项 区分列表首尾

    列表项,有时需要判断列表首尾,来筛选设置样式 如上图,三个项有间隔,怎么保证设置了列表项之间的距离后,整体还水平居中显示呢? .item:not(:first-child) { margin-left ...

  9. Web服务器压力测试工具 - HULK

    HULK是一种web的拒绝服务攻击工具.它能够在web服务器上产生许多单一的伪造流量,能绕开引擎的缓存,因此能够直接攻击服务器的资源池.hulk的特别之处在于:对于每一个请求都是独特的,能够绕开引擎的 ...

  10. 一天吃透SpringBoot面试八股文

    Springboot的优点 内置servlet容器,不需要在服务器部署 tomcat.只需要将项目打成 jar 包,使用 java -jar xxx.jar一键式启动项目 SpringBoot提供了s ...