技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

一個(gè)具有鼠標(biāo)懸停動(dòng)畫效果的SVG復(fù)選框checkbox

作者:admin    時(shí)間:2022-12-10 13:41:55    瀏覽:

本文介紹一個(gè)具有鼠標(biāo)懸停效果的SVG動(dòng)畫checkbox復(fù)選框，在此之前，我也介紹過8款SVG創(chuàng)建的動(dòng)畫checkbox多選框和radio單選框。

具有鼠標(biāo)懸停動(dòng)畫效果的SVG復(fù)選框checkbox

demodownload

完整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>復(fù)選框演示</span>
    </label>


  </div>
</body>

</html>

代碼說明

本示例的布局，用到了一個(gè)Bootstrap的CSS樣式文件：bootstrap.min.css，在實(shí)際使用環(huán)境中，你也可以不用這個(gè)文件，但你需要重新調(diào)整一下多選框checkbox的排版樣式：位置、顏色、大小等。

使用一個(gè)label標(biāo)簽作為容器，包含checkbox的input、div（svg）、span三個(gè)元素，其中，checkbox的input元素是不可見的：class="invisible"，而是使用了svg來創(chuàng)建一個(gè)checkbox。

鼠標(biāo)懸停效果使用的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;
  ... ...
}

總結(jié)

這是一個(gè)用SVG路徑動(dòng)畫創(chuàng)建的漂亮而簡單的HTML和CSS復(fù)選框，它有一個(gè)鼠標(biāo)懸停的動(dòng)畫效果。如果你對(duì)自定義復(fù)選框感興趣，那么推薦看看此前的文章8款SVG創(chuàng)建的動(dòng)畫checkbox多選框和radio單選框。

相關(guān)文章

標(biāo)簽: css  checkbox  SVG  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */