通过 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
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。