html表格边框设置波浪线,SVG CSS3 按钮悬停边线环绕+波浪线+选择框动效
CSS
语言：
CSSSCSS
确定
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: #fdfdfd;
margin: 25px 0;
}
span.title {
margin: 0 auto;
color: #bbb;
font-family: 'Open Sans', sans-serif;
font-size: 0.85rem;
text-align: center;
display: block;
}
.basicBox,
.swiggleBox,
.checkBox {
width: 130px;
height: 65px;
margin: 15px auto;
color: #4274d3;
font-family: 'Open Sans', sans-serif;
font-size: 1.15rem;
line-height: 65px;
text-transform: uppercase;
text-align: center;
position: relative;
cursor: pointer;
}
svg {
position: absolute;
top: 0;
left: 0;
}
svg rect,
svg path,
svg polyline {
fill: none;
stroke: #4274d3;
stroke-width: 1;
}
.basicBox:hover svg rect,
.swiggleBox:hover svg path,
.checkBox:hover svg polyline {
stroke: #4274d3;
/* Basic Box */
}
svg rect {
stroke-dasharray: 400, 0;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
}
.basicBox:hover svg rect {
stroke-width: 3;
stroke-dasharray: 35, 245;
stroke-dashoffset: 38;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
/* Swiggle Box */
}
svg path {
stroke-dasharray: 265, 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
.swiggleBox:hover svg path {
stroke-width: 3;
stroke-dasharray: 0, 350;
stroke-dashoffset: 20;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
/* Check Box */
}
.checkBox svg {
margin-left: -10px;
}
.checkBox svg rect,
.checkBox svg polyline {
fill: none;
stroke: #4274d3;
stroke-width: 1;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
}
.checkBox:hover svg rect {
stroke-width: 2;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
}
.checkBox:hover svg polyline {
stroke-width: 2;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
}
.checkBox svg .button {
stroke-dasharray: 400px, 0;
}
.checkBox:hover svg .button {
stroke-dasharray: 0, 400px;
stroke-dashoffset: 33px;
/* Check Mark Effect */
}
.box,
.checkMark {
opacity: 0;
}
.checkBox:hover .box {
-webkit-animation: boxDisplay 0.2s forwards;
-moz-animation: boxDisplay 0.2s forwards;
-ms-animation: boxDisplay 0.2s forwards;
-o-animation: boxDisplay 0.2s forwards;
animation: boxDisplay 0.2s forwards;
-webkit-animation-delay: 0.65s;
-moz-animation-delay: 0.65s;
-ms-animation-delay: 0.65s;
-o-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.checkBox:hover .checkMark {
-webkit-animation: checkDisplay 0.2s forwards;
-moz-animation: checkDisplay 0.2s forwards;
-ms-animation: checkDisplay 0.2s forwards;
-o-animation: checkDisplay 0.2s forwards;
animation: checkDisplay 0.2s forwards;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-ms-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
/* Check Box Display */
}
@-webkit-keyframes boxDisplay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes boxDisplay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes boxDisplay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes boxDisplay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes boxDisplay {
/* Check Mark Display */
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes checkDisplay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes checkDisplay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes checkDisplay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes checkDisplay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes checkDisplay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
html表格边框设置波浪线,SVG CSS3 按钮悬停边线环绕+波浪线+选择框动效相关推荐
- html设置边框dw,Dreamweaver表格边框设置的css语法大全
Dreamweaver表格边框设置的css语法大全 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标 ...
- html表格边框为void,将表格边框设置为THICK(Setting Table borders to THICK)
将表格边框设置为THICK(Setting Table borders to THICK) 我想创建一个厚边框的表格. 我一直在寻找一段时间,但似乎THICK风格不起作用. 如果我选择其他样式,例如D ...
- html表格边框设置单线,border-collapse把table边框的样式设置成单线
table 默认的情况,如果给单元格,添加边框的时候.每个边框都会有自己的边框.这样看上去就出现了,类似的双边框情况.看上去一点也不美观,还是把边框设置成单线的时候,比较美观.table中有个bord ...
- CSS3动画实战之多关键帧实现无限循环动效的时间间隔
题目有点绕,源起最近一个项目中所需的一枚loading图标.SVG+CSS3动画做了那么多,真正应用在项目中的机会少之又少,所以,抓住一切机会,即使loading也不能放过,用系统自带菊花有辱我这一年 ...
- css单线边框_HTML table表格边框设置为单线的方法
因为平时在html页面中设计表格样式时,一般都是使用 DIV+CSS 的方式来实现,很少使用 table 表格元素,而今天图省事使用 table 表格元素时,发现设置其边框为的样式为双线的形式,所以就 ...
- html table表格大小写,HTML table表格边框设置为单线的方法
因为平时在html页面中设计表格样式时,一般都是使用 DIV+CSS 的方式来实现,很少使用 table 表格元素,而今天图省事使用 table 表格元素时,发现设置其边框为的样式为双线的形式,所以就 ...
- html svg波浪,svg+css3做一个动感的波浪效果实现
一根矢量的波浪 完整代码: d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7, ...
- html图片平移,CSS3 按钮悬停时背景图片平移入场
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 $(".thumb-next").on('mouseleave', function() ...
- python word 表格 框线_python设置表格边框的具体方法
安装 xlwings 直接安装用 pip install xlwings,用 anaconda 的,已经内置了,见下图. 导入 xlwings import xlwings as xw 打开 Exce ...
最新文章
- Facial keypoints detection Kaggle 竞赛系列
- 独家｜OpenCV1.10 使用OpenCV实现摄像头标定
- P3373 【模板】线段树 2
- python列表解析的新方法
- ubuntu 14.04 LTS 右键菜单解压压缩包时出错
- Pro LINQ 之三：LINQ to DataSet
- OpenCV与c语言图像融合
- [原创]关于在VS2008和VS2010中禁用及卸载Visual Assist X的方法研究
- 一个嵌入式硬件驱动模块通常应包括哪些函数？
- linux环境将python程序做成可执行
- [转载] 百科全说——潘怀宗：“认识”食品添加剂（10-10-20）
- 那些年我们追过的计算机经典书
- web之Attribute
- gmsk的matlab仿真,MSKGMSK 导师传给我的关于MSK和GMSK的一些相关MATLAB仿真源码 - 下载 - 搜珍网...
- python求平面n个两两间距离_任意两平面求夹角|Python练习系列[11]
- 我的团长我的团第二集
- 《白话大数据与机器学习》
- 电力电子技术笔记（5）——其它新型电力电子器件、功率集成电路
- html页面漏斗图,echarts 漏斗图示例
- 最简单的将PPT转化成动态GIF