使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西。今天我们要为您介绍一些复选框和单选按钮效果。实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中的时候执行 SVG 动画。
温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
对于自定义的复选框或单选按钮,我们使用标签的伪元素 ::before 并通过设置不透明度为0来因此输入框。初始,我们通过 JavaScript 在输入框后面添加必要的 SVG 元素。不过它们是不可见的,因为它们的路径是空的,一旦我们选中输入框,我们给元素应用适当的过渡路径动画。
这是一个简单的表单 HTML 结构示例:
1 2 3 4 5 6 7 8 9 10 | <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> |
我们使用的是无序列表,包含输入框和标签。核心的样式用于使输入框不可见并使用伪元素创建自定义的输入框:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .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.3 s; } .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.3 s; } |
当输入框被选中时,我们动态改变“伪复选框”的不透明度和标签的颜色:
1 2 3 4 5 6 7 8 9 | .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 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步