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;
}
}