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;

}

}