核心属性
-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%;
-
}
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
产品觉醒:产品经理的视角与方法论
判官(李泽澄) / 电子工业出版社 / 2018-11 / 59.80元
《产品觉醒:产品经理的视角与方法论》是作者多年工作经验的汇集,通过自己亲身经历来对产品运营、行业和人生选择做一个全面的复盘,为读者提供有一定深度的分析。 《产品觉醒:产品经理的视角与方法论》共7章,第1章介绍了产品经理应该具有的视角来分析和观察产品分析方法;第2章介绍了做产品时如何破局来解决相应的问题;第3章介绍了在做产品经理前先分析自己;第4章介绍了怎么来解决执行力的问题;第5章介绍了怎么......一起来看看 《产品觉醒:产品经理的视角与方法论》 这本书的介绍吧!