纯CSS+SVG创建有趣的动画复选框checkbox

技术频道 - html技术

纯CSS+SVG创建有趣的动画复选框checkbox

作者:admin 时间:2022-12-13 9:10:33 浏览:

关于SVG复选框checkbox，此前曾介绍过一些，如：

今天，我将继续介绍一个CSS+SVG创建的有趣的动画复选框checkbox。

CSS+SVG创建有趣的动画复选框checkbox

完整HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
  background-color: HSL(250, 22%, 30%);
  padding: 10vw;
  font-size: 2em;
  line-height: 1.6;
}

.c-custom-checkbox {
  display: block;
  position: relative;
  cursor: pointer;
  color: #eee;
  font-family: Indie Flower;
}

.c-custom-checkbox svg { 
  display: inline-block;
  vertical-align: middle;
  margin-bottom: .2em;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
}


.c-custom-checkbox input[type="checkbox"] {
  opacity: 0;
  width: 1em;
  height: 1em;
  position: absolute;
  left: .5em;
  top: .4em;
}

.c-custom-checkbox svg path {
  transition: stroke-dashoffset .4s linear;
}


.c-custom-checkbox input[type="checkbox"]:checked + svg path {
  stroke-dashoffset: 0;
  stroke: currentColor;
}

.c-custom-checkbox input[type="checkbox"] + svg path {
  stroke: #eee;
}

.c-custom-checkbox input[type="checkbox"]:checked + label {
  text-decoration: line-through;
}

.c-custom-checkbox input[type="checkbox"]:focus + svg {
  outline: 2px solid gold;
  outline-offset: 4px;
}


.c-custom-checkbox input[type="checkbox"]:focus:not(:focus-visible) + svg {
  outline: none;
}
</style>
</head>
<body>
  <label for="option" class="c-custom-checkbox">
  <!--  length of the path is 270px -->
  <input type="checkbox" id="option"/>
  <svg viewBox="0 0 60 40" aria-hidden="true" focusable="false"><path d="M21,2 C13.4580219,4.16027394 1.62349378,18.3117469 3,19 C9.03653312,22.0182666 25.2482171,10.3758914 30,8 C32.9363621,6.53181896 41.321398,1.67860195 39,4 C36.1186011,6.8813989 3.11316157,27.1131616 5,29 C10.3223659,34.3223659 30.6434647,19.7426141 35,18 C41.2281047,15.5087581 46.3445303,13.6554697 46,14 C42.8258073,17.1741927 36.9154967,19.650702 33,22 C30.3136243,23.6118254 17,31.162498 17,34 C17,40.4724865 54,12.4064021 54,17 C54,23.7416728 34,27.2286213 34,37" stroke-width="4" fill="none" stroke-dasharray="270" stroke-dashoffset="270" ></path></svg>
  添加辅助功能语句
</label>
</body>
</html>

解释

HTML代码里，这个复选框checkbox由3个标签组成：label、input、svg。

首先，label标签是一个自定义复选框checkbox；其次，input是默认复选框checkbox，但会被隐藏掉；而svg是一个路径标签，用它来实现画图效果。

下面CSS代码自定义复选框checkbox的大小。

.c-custom-checkbox svg { 
  display: inline-block;
  vertical-align: middle;
  margin-bottom: .2em;
  width: 1em; /* 复选框宽度 */
  height: 1em; /* 复选框高度 */
  border: 2px solid currentColor;
}

下面CSS代码定义复选框checkbox的颜色、鼠标悬停属性。

.c-custom-checkbox {
  display: block;
  position: relative;
  cursor: pointer; /* 鼠标悬停形状 */
  color: #eee; /* 复选框颜色 */
  font-family: Indie Flower;
}

最后要说的是，此示例是纯CSS+SVG实现，不用Javascript或jQuery，而在前面的文章8款SVG创建的动画checkbox多选框和radio单选框里，需要用到jQuery来创建SVG动画效果。

总结

本文介绍了一个纯CSS+SVG创建有趣的动画复选框checkbox，如果你需要一个生动的具有个性化的复选框checkbox，这个有趣的SVG动画复选框checkbox是值得推荐使用的。

相关文章