让复选框与众不同：4 种独特 SVG 动画风格，颠覆你的设计认知

前端

2023-12-02 02:31:56

用SVG自定义复选框，打造灵动用户体验

个性化你的表单

复选框是表单应用中不可或缺的组件，但其默认样式往往呆板无趣，难以融入个性化设计。为了打破这一桎梏，本文将介绍一种采用SVG（可缩放矢量图形）技术，自定义复选框外观和动画效果的方法。

SVG的优势

SVG是一种基于XML的矢量图形格式，具有以下优势：

可扩展性： 可任意放大缩小，保持清晰度。
样式化： 可通过CSS灵活地修改外观和动画。
轻量级： 文件体积小，不会影响网页加载速度。

打造自定义复选框

要使用SVG自定义复选框，需要遵循以下步骤：

1. HTML结构

在HTML中，创建一个复选框容器，包含一个隐藏的HTML复选框和一个SVG元素。

<label class="checkbox-container">
  <input type="checkbox" id="checkbox">
  <svg class="checkbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path class="checkbox-path" d="M10 40L40 70 90 10"></path>
  </svg>
</label>

2. CSS样式

在CSS中，设置复选框的样式，包括尺寸、颜色、边框和动画效果。

.checkbox-container {
  display: inline-block;
}

.checkbox {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #000;
  stroke-width: 2;
  transition: all 0.3s ease-in-out;
}

.checkbox-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

#checkbox:checked ~ .checkbox {
  stroke: #0f0;
  stroke-dashoffset: 0;
}

3. JavaScript动画

在JavaScript中，添加动画效果。当复选框被选中或取消选中时，触发SVG路径的动画。

const checkbox = document.getElementById('checkbox');

checkbox.addEventListener('change', function() {
  const checkboxPath = document.querySelector('.checkbox-path');

  if (checkbox.checked) {
    checkboxPath.style.strokeDashoffset = 0;
  } else {
    checkboxPath.style.strokeDashoffset = 100;
  }
});