css
html表格边框设置波浪线,svg css3 按钮悬停边线环绕 波浪线 选择框动效 -凯发ag旗舰厅登录网址下载
css
语言：
cssscss
确定
@import ;
*,
*::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;
}
}
总结
以上是凯发ag旗舰厅登录网址下载为你收集整理的html表格边框设置波浪线,svg css3 按钮悬停边线环绕 波浪线 选择框动效的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。
- 上一篇：
- 下一篇：