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

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

核心属性

-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%;
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

Spring技术内幕

计文柯 / 机械工业出版社 / 2010-1-1 / 55.00元

内容简介：本书是Spring领域的问鼎之作，由业界拥有10余年开发经验的资深Java专家亲自执笔!Java开发者社区和Spring开发者社区一致强烈推荐。国内第一本基于Spring3．0的著作，从源代码的角度对Spring的内核和各个主要功能模块的架构、设计和实现原理进行了深入剖析。你不仅能从木书中参透Spring框架的优秀架构和设计思想，而且还能从Spring优雅的实现源码中一窥......一起来看看《Spring技术内幕》这本书的介绍吧!

码农工具

在线进制转换器

各进制数互转换器

RGB CMYK 转换工具

RGB CMYK 互转工具