Material Design 风格单复选框动画特效

PetitQ 表单/表格 2019-1-25 1.32K 0 0

这是一款效果非常炫酷的纯 CSS3 Material Design 风格单选按钮和复选框动画特效。该特效使用 CSS 帧动画来在单选按钮或复选框被选择时制作类似于按钮点击波的效果。它的代码简洁，效果非常的出色。遗憾的是，目前只有谷歌浏览器支持这一特效，在不支持该特效的浏览器上，单选按钮和复选框也被进行了一些美化，整体还是不错的。

HTML 结构

该特效的复选框和单选按钮的 HTML 结构都是使用一个标签来包裹一个<input>元素。

也想出现在这里？联系我们吧

```
<label>
```

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

```
  Checkbox
```
```
</label>
```
```
<label>
```

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

```
  Radio option
```
```
</label>
```

CSS 样式

单选按钮和复选框的基本样式如下，其中::before 伪元素用于制作单选按钮和复选框中的小叉，::after 伪元素用于制作点击波动画效果。

```
.option-input {
```
```
  -webkit-appearance: none;
```
```
  -moz-appearance: none;
```
```
  -ms-appearance: none;
```
```
  -o-appearance: none;
```
```
  appearance: none;
```
```
  position: relative;
```
```
  top: 13.33333px;
```
```
  width: 40px;
```
```
  height: 40px;
```

  -webkit-transition: all 0.15s ease-out 0;

  -moz-transition: all 0.15s ease-out 0;

```
  transition: all 0.15s ease-out 0;
```
```
  background: #cbd1d8;
```
```
  border: none;
```
```
  color: #fff;
```
```
  cursor: pointer;
```
```
  display: inline-block;
```
```
  outline: none;
```
```
  position: relative;
```
```
  margin-right: 0.5rem;
```
```
  z-index: 1000;
```
```
} 
```

.option-input:hover { background: #9faab7; }

.option-input:checked { background: #40e0d0; }

```
.option-input:checked::before {
```
```
  width: 40px;
```
```
  height: 40px;
```
```
  position: absolute;
```
```
  content: '\2716';
```
```
  display: inline-block;
```
```
  font-size: 26.66667px;
```
```
  text-align: center;
```
```
  line-height: 40px;
```
```
}
```
```
 
```
```
.option-input:checked::after {
```
```
  -webkit-animation: click-wave 0.65s;
```
```
  -moz-animation: click-wave 0.65s;
```
```
  animation: click-wave 0.65s;
```
```
  background: #40e0d0;
```
```
  content: '';
```
```
  display: block;
```
```
  position: relative;
```
```
  z-index: 100;
```
```
}
```

.option-input.radio { border-radius: 50%; }

.option-input.radio::after { border-radius: 50%; }

然后使用 CSS keyframe 来制作 Material Design 风格的按钮点击波特效。

```
@-webkit-keyframes 
```
```
click-wave { 0% {
```
```
 width: 40px;
```
```
 height: 40px;
```
```
 opacity: 0.35;
```
```
 position: relative;
```
```
}
```
```
 100% {
```
```
 width: 200px;
```
```
 height: 200px;
```
```
 margin-left: -80px;
```
```
 margin-top: -80px;
```
```
 opacity: 0.0;
```
```
}
```
```
}
```
```
 
```
```
@-moz-keyframes 
```
```
click-wave { 0% {
```
```
 width: 40px;
```
```
 height: 40px;
```
```
 opacity: 0.35;
```
```
 position: relative;
```
```
}
```
```
 100% {
```
```
 width: 200px;
```
```
 height: 200px;
```
```
 margin-left: -80px;
```
```
 margin-top: -80px;
```
```
 opacity: 0.0;
```
```
}
```
```
}
```
```
 
```
```
@-o-keyframes 
```
```
click-wave { 0% {
```
```
 width: 40px;
```
```
 height: 40px;
```
```
 opacity: 0.35;
```
```
 position: relative;
```
```
}
```
```
 100% {
```
```
 width: 200px;
```
```
 height: 200px;
```
```
 margin-left: -80px;
```
```
 margin-top: -80px;
```
```
 opacity: 0.0;
```
```
}
```
```
}
```
```
 
```
```
@keyframes 
```
```
click-wave { 0% {
```
```
 width: 40px;
```
```
 height: 40px;
```
```
 opacity: 0.35;
```
```
 position: relative;
```
```
}
```
```
 100% {
```
```
 width: 200px;
```
```
 height: 200px;
```
```
 margin-left: -80px;
```
```
 margin-top: -80px;
```
```
 opacity: 0.0;
```
```
}
```
```
}
```

Material Design 风格单复选框动画特效

已有 329 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

表单/表格

Material Design 风格单复选框动画特效

HTML 结构

CSS 样式

Material Design 风格单复选框动画特效

相关文章

js+CSS3复选框美化特效

Bootstrap4动态模态窗口jQuery插件

HideSeek - 实时搜索筛选jQuery插件

发表回复取消回复

热销模板

表单/表格

HTML 结构

CSS 样式

Material Design 风格单复选框动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复