使用 SVG 制作单选和多选框动画【附源码】

最新推荐文章于 2022-09-01 07:51:12 发布

qq_45670012

最新推荐文章于 2022-09-01 07:51:12 发布

阅读量387

点赞数

分类专栏：前端文章标签： javascript svg 单选框多选框

原文链接：https://www.mk2048.com/blog/blog.php?id=hab21hkhh2hj&title=%E4%BD%BF%E7%94%A8+SVG+%E5%88%B6%E4%BD%9C%E5%8D%95%E9%80%89%E5%92%8C%E5%A4%9A%E9%80%89%E6%A1%86%E5%8A%A8%E7%94%BB%E3%80%90%E9%99%84%E6%BA%90%E7%A0%81%E3%80%91

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

　　通过 JavaScript 实现 SVG 路径动画，我们可以做很多花哨的东西。今天我们要为您介绍一些复选框和单选按钮效果。实现的主要思路是隐藏原生的输入框，使用伪元素创造更具吸引力的样式，输入框被选中的时候执行 SVG 动画。

在线演示立即下载

　　温馨提示：为保证最佳的效果，请在 IE10 、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

　　对于自定义的复选框或单选按钮，我们使用标签的伪元素 ::before 并通过设置不透明度为0来因此输入框。初始，我们通过 JavaScript 在输入框后面添加必要的 SVG 元素。不过它们是不可见的，因为它们的路径是空的，一旦我们选中输入框，我们给元素应用适当的过渡路径动画。

　　这是一个简单的表单 HTML 结构示例：

<form class="ac-custom ac-checkbox ac-cross">
    <h2>How do you collaboratively administrate empowered markets via plug-and-play networks?</h2>
    <ul>
        <li><input id="cb1" name="cb1" type="checkbox"><label for="cb1">Efficiently unleash information</label></li>
        <li><input id="cb2" name="cb2" type="checkbox"><label for="cb2">Quickly maximize timely deliverables</label></li>
        <li><input id="cb3" name="cb3" type="checkbox"><label for="cb3">Dramatically maintain solutions</label></li>
        <li><input id="cb4" name="cb4" type="checkbox"><label for="cb4">Completely synergize relationships</label></li>
        <li><input id="cb5" name="cb5" type="checkbox"><label for="cb5">Professionally cultivate customer service</label></li>
    </ul>
</form>

　　我们使用的是无序列表，包含输入框和标签。核心的样式用于使输入框不可见并使用伪元素创建自定义的输入框：

.ac-custom label {
    display: inline-block;
    position: relative;
    font-size: 2em;
    padding: 0 0 0 80px;
    vertical-align: top;
    color: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: color 0.3s;
}
 
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 0;
    margin-top: -25px;
    position: absolute;
    cursor: pointer;
}
 
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 100;
}
 
.ac-custom label::before {
    content: '';
    border: 4px solid #fff;
    transition: opacity 0.3s;
}

　　当输入框被选中时，我们动态改变“伪复选框”的不透明度和标签的颜色：

.ac-custom input[type="checkbox"]:checked   label,
.ac-custom input[type="radio"]:checked   label {
    color: #fff;
} 
 
.ac-custom input[type="checkbox"]:checked   label::before,
.ac-custom input[type="radio"]:checked   label::before {
    opacity: 0.8;
}

在线演示立即下载

您可能感兴趣的相关文章

本文链接：使用 SVG 制作单选和多选框动画 via Codrops

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

更多专业前端知识，请上【猿2048】www.mk2048.com

qq_45670012

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用 SVG 制作单选和多选框动画【附源码】

　　通过 JavaScript 实现 SVG 路径动画，我们可以做很多花哨的东西。今天我们要为您介绍一些复选框和单选按钮效果。实现的主要思路是隐藏原生的输入框，使用伪元素创造更具吸引力的样式，输入框被...
复制链接

扫一扫