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

时间:2022-12-10 15:24:01

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

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

使用 SVG 制作单选和多选框动画【附源码】的更多相关文章

  1. 各种 SVG 制作单选和多选框动画

    在线演示      源码下载

  2. &lbrack;原创&rsqb;delphi一次性批量在TScrollBox中显示N个复选框TCheckBox的源码

    unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  3. php一些单选、复选框的默认选择方法(示例)

    转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...

  4. Python3&plus;Selenium3&plus;webdriver学习笔记8(单选、复选框、弹窗处理)

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...

  5. iCheck获取单选和复选框的值和文本

    //获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...

  6. MFC&lowbar;2&period;1使用单选和多选框

    使用单选和多选框 单选 1.拖控件 设置名字,CTRL+D设置顺序,属性设置第一个GROUP为TRUE: 2.设置第一个按钮绑定变量为 值 INT型 名称m_RadioIndxe; 3.设置单击响应内 ...

  7. 纯css美化单选、复选框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. mui单选和多选框

    具体见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <ti ...

  9. selenium&plus;Python(定位 单选、复选框,多层定位)

    1.定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法.定位一组对象 ...

随机推荐

  1. 用ConfigParser模块读写配置文件——Python

    对于功能较多.考虑用户体验的程序,配置功能是必不可少的,如何存储程序的各种配置? 1)可以用全局变量,不过全局变量具有易失性,程序崩溃或者关闭之后配置就没了,再者配置太多,将变量分配到哪里也是需要考虑 ...

  2. 在RAC中,当私有网线拔了后,会怎么样?

    原文链接http://blog.mchz.com.cn/?p=4305 实际环境: OS:oel5.5_x64 ORACLE:10205 3节点rac 架设于vmware esxi虚拟机上 所需测试项 ...

  3. JS解析DataSet&period;GetXML&lpar;&rpar;方法产生的xml

    在实际的项目制作过程中,经常要采用ajax方式来进行,当然,这就免不了要进行数据交换.如果采用拼接字符串的方式来进行,不仅拼接的时候麻烦,而且在拆解的时候更加麻烦,一旦遇到特殊字符,那么就是灾难了.因 ...

  4. MIP 移动网页加速器视频教程全新发布

    MIP (Mobile Instant Pages - 移动网页加速器) 是百度推出的开源项目,用于移动端页面加速.MIP 技术通过优化浏览器资源加载,前端代码执行及 CDN 缓存加速来加速页面,打造 ...

  5. &lbrack;CentOS&rsqb; rsync同步目录进行备份文件

    操作不难,网上一堆.这里列几个 CentOS7 参考地址: https://www.server-world.info/en/note?os=CentOS_7&p=rsync Copy fil ...

  6. Flask开发基础

    Flask是一个使用Python编写的轻量级Web应用框架. 模板引擎使用的Jinja2 Flask框架简单易学,但是其保留了扩展的弹性,可以使用Flask-extension 加入ORM ,窗体验证 ...

  7. Python爬虫入门教程石家庄链家租房数据抓取

    1. 写在前面 这篇博客爬取了链家网的租房信息,爬取到的数据在后面的博客中可以作为一些数据分析的素材.我们需要爬取的网址为:https://sjz.lianjia.com/zufang/ 2. 分析网 ...

  8. Linux 期中架构 inotify

    全网备份数据同步方案 备份网站内部人员信息  不能解决外部(人员)上传数据的备份 定时任务最短执行的周期为一分钟,采用定时任务方式,有时可能造成一分钟内的数据丢失 因此对于重要数据需要采用实时同步的方 ...

  9. Asp&period;Net实现FORM认证的一些使用技巧&lpar;必看篇&rpar;

    最近因为项目代码重构需要重新整理用户登录和权限控制的部分,现有的代码大体是参照了.NET的FORM认证,并结合了PORTAL KITS的登录控制,代码比较啰嗦,可维护性比较差.于是有了以下的几个需求( ...

  10. Eclipse快捷键大全(补充)

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+Shift+O 自动导入所需要的包(这个用的次数也相当多)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增 ...