html5中如何让一个动画框左右上下浮动,HTML5 SVG如何实现炫酷checkbox复选框动画特效...
简要教程
这是一款HTML5 SVG炫酷checkbox复选框动画特效。该checkbox动画特效使用svg来构建复选框效果,然后通过CSS3动画来控制复选框的选中和取消选中状态,效果非常炫酷。
使用方法
在页面中引入fency-checkbox.css文件。
HTML结构
一个SVG checkbox复选框的基本HTML结构如下:
width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
S1.591,37.998,1.591,25S12.127,1.466,25.125,1.466c9.291,0,17.325,5.384,21.151,13.203L19,36l-9-14"/>
CheckBox
其中,theme1是该checkbox的颜色主题。fency-checkbox.css中内置了7种颜色主题,你也可以自己编写自己的颜色主题效果。
CSS样式
通用的SVG checkbox复选框的样式如下:
.checkboxWrapper{
display:block; /* you can replace with 'display:inline-block' if you want parent element inline */
}
.checkboxWrapper input[type="checkbox"] {
display: none;
}
.checkboxWrapper input[type="checkbox"] + label {
cursor: pointer;
display:block;
}
.checkboxWrapper input[type="checkbox"] + label i {
display: inline-block;
vertical-align: middle;
}
.checkboxWrapper input[type="checkbox"] + label path {
stroke-dashoffset: -189;
stroke: inherit;
stroke-dasharray: 189;
transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
}
.checkboxWrapper input[type="checkbox"]:checked + label path {
stroke-dashoffset: 0;
}
定义一种颜色主题就是为SVG的stroke属性设置一种颜色,例如theme1的描边颜色为:
.theme1{
stroke:#1ABC9C;
}
控制SVG checkbox复选框尺寸的CSS样式如下:
.extraSmallCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg{
width:20px;
height:20px;
}
.smallCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg{
width:30px;
height:30px;
}
.mediumCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg{
width:40px;
height:40px;
}
.largeCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg{
width:50px;
height:50px;
}
.extraLargeCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg{
width:60px;
height:60px;
}
要控制尺寸,你需要做的事情就是在带有checkboxWrapperclass的父div容器上添加适当的class类。
本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端HTML5/CSS3频道!
html5中如何让一个动画框左右上下浮动,HTML5 SVG如何实现炫酷checkbox复选框动画特效...相关推荐
- html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
- html5复选框控制按钮状态,HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件...
本篇教程探讨了HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < ...
- android勾选控件_Android中CheckBox复选框控件使用方法详解
CheckBox复选框控件使用方法,具体内容如下 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建Linea ...
- LayUI实现Checkbox复选框的单选及取消单选,即只能选一个或者全都不选
项目用LayUI进行开发,需求方提出一个范围权限控制的实现方案.在复选框只能单选的前提下,管理员可以取消勾选,查看所有数据,但普通用户由于权限限制,不可以取消勾选. 在查找资料的过程中,发现jq的常用 ...
- 判断多个checkbox复选框至少选一个(提交时必须选择一个)
HTML代码: <h2>请选择您的爱好:</h2><form action="" method="post" id="f ...
- Html5添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件教程...
2019独角兽企业重金招聘Python工程师标准>>> 一.使用方法 <link href='dist/rcswitcher.min.css' rel='stylesheet' ...
- checkbox 复选框只选择一个
<input type="checkbox" id="{{$value.id}}" name="chk" onClick=" ...
- checkbox复选框,如何让其勾选时触发一个事件,取消勾选时不触发
<input type="checkbox" οnclick="checkboxOnclick(this)" /><script>fun ...
- uniapp中checkbox复选框动态绑定数据
checkbox复选框动态绑定数据: <template><view class="box"><checkbox-group @change=&quo ...
最新文章
- sublime python3 输入换行不结束
- OSI/RM 开放系统互联参考模型
- 一个优秀的程序员应该如何提高工作效率?
- java利用循环打印AVA,JAVA语言-AVA文件流
- 《PHP和MySQL Web开发从新手到高手(第5版)》一一1.7 万事俱备,摩拳擦掌
- 程序员面临 35 岁危机?网友:我 70 了,依然在写程序
- 2021软件测试技能大赛,2021软件测试国赛获奖感言
- Debian10 双显卡切换
- python短信验证码_python发送短信验证码
- RabbitMQ系列——Rabbitmq Plugin configuration unchanged. 解决方案
- java xml格式化_使用java将xml格式化
- 计算机组成原理超详解
- DHCP:(5)华为防火墙USG上部署DHCP服务以及DHCP中继
- c语言一维数组n个元素求和,C++编程一维数组元素求和?
- winxp右键进入dos
- RS232及RTS和CTS
- 爱分析访谈阿博茨CEO杨永智:从感知到认知,阿博茨用AI解放金融民工
- python去除图片水印_Python | 图中使用类的水印
- 机房服务器系统监控软件,机房服务器系统监控软件
- ping回显无法访问目标网络network unreachable故障模拟
热门文章
- Autodesk 论坛 - 您开发的必经之地
- Redis 知识点总结:为何使用reids、redis是什么、redis的优势、redis如何持久化
- 小米11手机可以升级鸿蒙系统吗,37款确定可以升级EMUI11系统 鸿蒙手机只是时间问题...
- Centos7.x Rsync+Inotify实现数据实时同步
- 人大金仓数据库-kingbaseES
- 高数考研归纳 - 级数 - 幂级数
- 使用HTML+CSS写一个静态页面
- Zotero添加中文参考文献
- R语言 创建矩阵的方式
- OpenOffice前途惨淡,我们还有其它选择吗?