亚洲9影院99久久久久久,美女裸体18禁网站免费看图片,麻豆e奶女教师国产精品

技術(shù)頻道 - html技術(shù)

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

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

關(guān)于SVG復(fù)選框checkbox，此前曾介紹過一些，如：

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

CSS+SVG創(chuàng)建有趣的動畫復(fù)選框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代碼里，這個復(fù)選框checkbox由3個標(biāo)簽組成：label、input、svg。

首先，label標(biāo)簽是一個自定義復(fù)選框checkbox；其次，input是默認(rèn)復(fù)選框checkbox，但會被隱藏掉；而svg是一個路徑標(biāo)簽，用它來實(shí)現(xiàn)畫圖效果。

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

.c-custom-checkbox svg { 
  display: inline-block;
  vertical-align: middle;
  margin-bottom: .2em;
  width: 1em; /* 復(fù)選框?qū)挾?*/
  height: 1em; /* 復(fù)選框高度 */
  border: 2px solid currentColor;
}

下面CSS代碼定義復(fù)選框checkbox的顏色、鼠標(biāo)懸停屬性。

.c-custom-checkbox {
  display: block;
  position: relative;
  cursor: pointer; /* 鼠標(biāo)懸停形狀 */
  color: #eee; /* 復(fù)選框顏色 */
  font-family: Indie Flower;
}

最后要說的是，此示例是純CSS+SVG實(shí)現(xiàn)，不用Javascript或jQuery，而在前面的文章8款SVG創(chuàng)建的動畫checkbox多選框和radio單選框里，需要用到j(luò)Query來創(chuàng)建SVG動畫效果。

總結(jié)

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

相關(guān)文章