一個具有鼠標懸停動畫效果的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
- 站長推薦
