CSS中打对勾的特效是一种较为常见的效果。可以将打对勾的特效应用于按钮、复选框等元素,使其更加美观、生动。.checkmark { width: 25px; height: 25px; border:
CSS中打对勾的特效是一种较为常见的效果。可以将打对勾的特效应用于按钮、复选框等元素,使其更加美观、生动。
.checkmark { width: 25px; height: 25px; border: solid #999; border-width: 0 2px 2px 0; transform: rotate(45deg); display: inline-block; } .checkbox:checked ~ .checkmark { border-color: #2196F3; } .checkmark:after { content: ""; display: none; position: absolute; left: 9px; top: 5px; width: 5px; height: 10px; border: solid #2196F3; border-width: 0 2px 2px 0; transform: rotate(45deg); } .checkbox:checked ~ .checkmark:after { display: block; }
代码中利用border来绘制对勾,再利用transform来旋转,使其形成斜角的效果。.checkbox:checked ~ .checkmark的意思是选中状态下将对勾的颜色修改为蓝色。.checkmark:after则是在对勾的右侧增加一个小三角形,形成真正的对勾效果。
粉丝
0
关注
0
收藏
0