亚洲精品乱码久久久久久麻豆,99精品免费视频网站6,亚洲AV人人澡人人爽人人夜夜

技術頻道 - html技術

純CSS+SVG創(chuàng)建有趣的動畫復選框checkbox

作者:admin 時間:2022-12-13 9:10:33 瀏覽:

關于SVG復選框checkbox，此前曾介紹過一些，如：

今天，我將繼續(xù)介紹一個CSS+SVG創(chuàng)建的有趣的動畫復選框checkbox。

CSS+SVG創(chuàng)建有趣的動畫復選框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是一個路徑標簽，用它來實現(xiàn)畫圖效果。

下面CSS代碼自定義復選框checkbox的大小。

.c-custom-checkbox svg { 
  display: inline-block;
  vertical-align: middle;
  margin-bottom: .2em;
  width: 1em; /* 復選框?qū)挾?*/
  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實現(xiàn)，不用Javascript或jQuery，而在前面的文章8款SVG創(chuàng)建的動畫checkbox多選框和radio單選框里，需要用到jQuery來創(chuàng)建SVG動畫效果。

總結

本文介紹了一個純CSS+SVG創(chuàng)建有趣的動畫復選框checkbox，如果你需要一個生動的具有個性化的復選框checkbox，這個有趣的SVG動畫復選框checkbox是值得推薦使用的。

相關文章