CSS3 单选框动画特效

2019-09-13 郑州网站建设  

<div class="radio-1">

<input type="radio" name="radio-1" id="radio-1-1" checked="checked">

<label for="radio-1-1"></label>

<input type="radio" name="radio-1" id="radio-1-2">

<label for="radio-1-2"></label>

<input type="radio" name="radio-1" id="radio-1-3">

<label for="radio-1-3"></label>

</div>

这里,我们指定 input 标签的 type 值为 radio,并且一下所有的 radio name 值都相同,这样才可以实现单选效果。对于这里的 label 中的 for 属性,为什么这么设置一开始我也不明白,后来搜索了一下这个属性的定义,反正大概的意思就是说,只要设置了这个属性,当我们点击label 元素的时候,浏览器会自动把焦点转移到 radio 上去。下面用 CSS HTML设置效果。

.radio-1 {        width: 900px;        padding: 3% 0%;        margin: 10px auto;        background-color: darkseagreen;        text-align: center;

}

.radio-1 label {        display: inline-block;        position: relative;        width: 28px;        height: 28px;        border: 1px solid #cccccc;        border-radius: 100%;        cursor: pointer;        background-color: #ffffff;        margin-right: 10px;

}

这里我们首先看一下对 label 元素的设定,其中大部分属性我都在以前的新闻中介绍过了,唯一一个陌生的属性就是 cursor,这个属性是设定鼠标样式的,设置成 pointer 之后,当我们的鼠标放到 label 元素上时,鼠标样式就变成了一只手(在我PC上是这样)。好了,下面继续来看

.radio-1 label:after {

content: "";        position: absolute;        width: 20px;        height: 20px;        top: 4px;        left: 4px;        background-color: #666;        border-radius: 50%;        transform: scale(0);        transition: transform .2s ease-out;

}

 

这里我们用到了 after 选择器,为什么设置这个属性?就是为了设置如上图所示的小黑点。首先我们设置 content 属性为空,意思就是我们不需要填充任何内容,因为我们只是想设置背景色为黑色,仅此而已。还有,刚开始的时候我们设置 transform scale 值为 0 ,其达到的效果就是将小黑点隐藏。

.radio-1 [type="radio"]:checked + label {        background-color: #eeeeee;        transition: background-color .2s ease-in;

}

 

.radio-1 [type="radio"]:checked + label:after {

transform: scale(1);        transition: transform .2s ease-in;

}

 


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2125.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • 代码
  • class
  • CSS3
  • DIV
  • =
  • Ч
  • ra