一个具有鼠标悬停动画效果的SVG复选框checkbox
作者:admin 时间:2022-12-10 13:41:55 浏览:本文介绍一个具有鼠标悬停效果的SVG动画checkbox复选框，在此之前，我也介绍过8款SVG创建的动画checkbox多选框和radio单选框。
完整HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='bootstrap.min.css'>
<style>
body {
font-family: Avenir;
font-size: 16px;
}
.label-cbx {
user-select: none;
cursor: pointer;
margin-bottom: 0;
}
.label-cbx input:checked + .checkbox {
border-color: #20C2E0;
}
.label-cbx input:checked + .checkbox svg path {
fill: #20C2E0;
}
.label-cbx input:checked + .checkbox svg polyline {
stroke-dashoffset: 0;
}
.label-cbx:hover .checkbox svg path {
stroke-dashoffset: 0;
}
.label-cbx .checkbox {
position: relative;
top: 2px;
float: left;
margin-right: 8px;
width: 20px;
height: 20px;
border: 2px solid #C8CCD4;
border-radius: 3px;
}
.label-cbx .checkbox svg {
position: absolute;
top: -2px;
left: -2px;
}
.label-cbx .checkbox svg path {
fill: none;
stroke: #20C2E0;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 71px;
stroke-dashoffset: 71px;
transition: all 0.6s ease;
}
.label-cbx .checkbox svg polyline {
fill: none;
stroke: #FFF;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 18px;
stroke-dashoffset: 18px;
transition: all 0.3s ease;
}
.label-cbx > span {
pointer-events: none;
}
.cntr {
position: absolute;
top: 45%;
left: 0;
width: 100%;
text-align: center;
}
.invisible {
position: absolute;
z-index: -1;
width: 0;
height: 0;
opacity: 0;
}
</style>
</head>
<body>
<div class="cntr">
<label for="cbx" class="label-cbx">
<input id="cbx" type="checkbox" class="invisible">
<div class="checkbox">
<svg width="20px" height="20px" viewBox="0 0 20 20">
<path d="M3,1 L17,1 L17,1 C18.1045695,1 19,1.8954305 19,3 L19,17 L19,17 C19,18.1045695 18.1045695,19 17,19 L3,19 L3,19 C1.8954305,19 1,18.1045695 1,17 L1,3 L1,3 C1,1.8954305 1.8954305,1 3,1 Z"></path>
<polyline points="4 11 8 15 16 6"></polyline>
</svg>
</div>
<span>复选框演示</span>
</label>
</div>
</body>
</html>
代码说明
本示例的布局，用到了一个Bootstrap的CSS样式文件：bootstrap.min.css，在实际使用环境中，你也可以不用这个文件，但你需要重新调整一下多选框checkbox的排版样式：位置、颜色、大小等。
使用一个label标签作为容器，包含checkbox的input、div（svg）、span三个元素，其中，checkbox的input元素是不可见的：class="invisible"，而是使用了svg来创建一个checkbox。
鼠标悬停效果使用的CSS：
.label-cbx:hover .checkbox svg path {
stroke-dashoffset: 0;
}checkbox填充颜色定义：
.label-cbx input:checked + .checkbox {
border-color: #20C2E0;
}
.label-cbx input:checked + .checkbox svg path {
fill: #20C2E0;
}勾（√）的颜色定义：
.label-cbx .checkbox svg polyline {
fill: none;
stroke: #FFF;
... ...
}总结
这是一个用SVG路径动画创建的漂亮而简单的HTML和CSS复选框，它有一个鼠标悬停的动画效果。如果你对自定义复选框感兴趣，那么推荐看看此前的文章8款SVG创建的动画checkbox多选框和radio单选框。
相关文章
相关文章
x
- 站长推荐
