純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是值得推薦使用的。

相關文章