方法一::checked
使用 label
标签 + input::checkbox
标签实现点击
label标签的作用:点击label内部文本可以触发该控件,实现点击选择框或文字都可以出现动画效果
input:checkbox的用途:含有checked
属性实现选中未选择变化
<label class="label">
<input type="checkbox" class="select" hidden />
<span class="check">我是文字我是文字我是文字</span>
</label>
.label {
margin-bottom: 10px;
}
.select {
/* display: none; */
/* appearance: none; // 清除原生样式 */
}
.check {
position: relative;
color: #fff;
font-size: 1rem;
height: 1.5rem;
line-height: 1.5;
cursor: pointer;
user-select: none;
transition: 0.3s;
&::before {
content: "";
position: absolute;
left: -2.5rem;
width: 25px;
height: 25px;
border: 2px solid #f1faee;
transition: 0.2s;
}
&::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: #f1faee;
transform: scale(0);
transform-origin: right;
transition: transform 0.5s;
}
}
.select:checked + .check {
color: #585b57;
&::before { // 框动画
width: 25px;
height: 15px;
border-top: transparent;
border-right: transparent;
transform: rotate(-45deg);
}
&::after { // 线动画
transform: scale(1);
transform-origin: left;
}
}
方法二::target
# 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。
:target
选择器可用于当前活动的target元素的样式。
#select:target{
color: #585b57;
&::before {
width: 25px;
height: 15px;
border-top: transparent;
border-right: transparent;
transform: rotate(-45deg);
}
&::after {
transform: scale(1);
transform-origin: left;
}
}
暂不推荐该方法,a标签会跳转页面,且不能直接第二次点击取消样式,需要设置href和id