多选和单选按钮的切换动画

栏目: 后端 · 前端 · 发布时间: 6年前

核心属性

-webkit-appearance: none 消除元素的默认外观

:hover/:checked + transition + background 背景颜色的过渡效果

text-align: center + line-height: 40px 对勾符号水平垂直居中显示

animation + width + height + opacity 按钮状态切换的动画效果

提示：::after伪元素实现的动画的中心点与单选多选按钮的中心点是对齐的，对齐的方法就是将伪元素上移和左移80px的距离，这个距离是通过200px ÷ 2 - 40px ÷ 2 = 80px计算得出的。

```
<div class="container">
```
```
<div>
```
```
<label>
```

<input type="checkbox" class="option-input checkbox" checked />

```
选项一
```
```
</label>
```
```
<label>
```

<input type="checkbox" class="option-input checkbox" />

```
选项二
```
```
</label>
```
```
<label>
```

<input type="checkbox" class="option-input checkbox" />

```
选项三
```
```
</label>
```
```
</div>
```
```
<div>
```
```
<label>
```

<input type="radio" class="option-input radio" name="example" checked />

```
选项一
```
```
</label>
```
```
<label>
```

<input type="radio" class="option-input radio" name="example" />

```
选项二
```
```
</label>
```
```
<label>
```

<input type="radio" class="option-input radio" name="example" />

```
选项三
```
```
</label>
```
```
</div>
```
```
</div>
```

```
body {
```
```
color: #9faab7;
```
```
background: #e8ebee;
```
```
}
```
```
body div {
```
```
padding: 1rem;
```
```
}
```
```
body label {
```
```
display: block;
```
```
line-height: 40px;
```
```
}
```
```
.option-input {
```
```
position: relative;
```
```
display: inline-block;
```
```
top: 13.33333px;
```
```
height: 40px;
```
```
width: 40px;
```
```
margin-right: 0.5rem;
```
```
color: #fff;
```
```
background: #cbd1d8;
```
```
outline: none;
```
```
cursor: pointer;
```
```
-webkit-appearance: none;
```
```
transition: all 0.15s ease-out 0s;
```
```
z-index: 1;
```
```
}
```
```
.option-input:hover {
```
```
background: #9faab7;
```
```
}
```
```
.option-input:checked {
```
```
background: #40e0d0;
```
```
}
```
```
.option-input:checked::before {
```
```
content: '✔';
```
```
position: absolute;
```
```
display: inline-block;
```
```
height: 40px;
```
```
width: 40px;
```
```
font-size: 26.66667px;
```
```
text-align: center;
```
```
line-height: 40px;
```
```
}
```
```
.option-input:checked::after {
```
```
content: '';
```
```
position: relative;
```
```
background: #40e0d0;
```
```
display: block;
```
```
animation: click-wave 0.65s;
```
```
}
```
```
@keyframes click-wave {
```
```
0% {
```
```
height: 40px;
```
```
width: 40px;
```
```
opacity: 0.35;
```
```
}
```
```
100% {
```
```
height: 200px;
```
```
width: 200px;
```
```
margin-left: -80px;
```
```
margin-top: -80px;
```
```
opacity: 0;
```
```
}
```
```
}
```
```
.option-input.radio {
```
```
border-radius: 50%;
```
```
}
```
```
.option-input.radio::after {
```
```
border-radius: 50%;
```
```
}
```

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Pro Git (Second Edition)

Scott Chacon、Ben Straub / Apress / 2014-11-9 / USD 59.99

Scott Chacon is a cofounder and the CIO of GitHub and is also the maintainer of the Git homepage ( git-scm.com ) . Scott has presented at dozens of conferences around the world on Git, GitHub and the ......一起来看看《Pro Git (Second Edition)》这本书的介绍吧!

码农工具

多选和单选按钮的切换动画

核心属性

Pro Git (Second Edition)

MD5 加密

SHA 加密

正则表达式在线测试