css按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans); *, *::before, *::after { box-sizing: border-box; } body { background-color: #1F1F1F; 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 { /* Add Padding Left To Center Text */ } .checkBox svg { /* Presentation Purposes */ 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; animatio.........完整代码请登录后点击上方下载按钮下载查看
网友评论0