技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

一个具有鼠标悬停动画效果的SVG复选框checkbox

作者:admin    时间:2022-12-10 13:41:55    浏览:

本文介绍一个具有鼠标悬停效果的SVG动画checkbox复选框,在此之前,我也介绍过8款SVG创建的动画checkbox多选框和radio单选框

具有鼠标悬停动画效果的SVG复选框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>复选框演示</span>
    </label>


  </div>
</body>

</html>

代码说明

本示例的布局,用到了一个Bootstrap的CSS样式文件:bootstrap.min.css,在实际使用环境中,你也可以不用这个文件,但你需要重新调整一下多选框checkbox的排版样式:位置、颜色、大小等。

使用一个label标签作为容器,包含checkboxinputdiv(svg)、span三个元素,其中,checkboxinput元素是不可见的:class="invisible",而是使用了svg来创建一个checkbox

鼠标悬停效果使用的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;
  ... ...
}

总结

这是一个用SVG路径动画创建的漂亮而简单的HTML和CSS复选框,它有一个鼠标悬停的动画效果。如果你对自定义复选框感兴趣,那么推荐看看此前的文章8款SVG创建的动画checkbox多选框和radio单选框

相关文章

标签: css  checkbox  SVG  
x
  • 站长推荐