按钮图标
炫酷CSS3按钮边框动画特效
PetitQ
这是一款效果非常炫酷的 CSS3 按钮边框动画特效。这组按钮边框动画共有 6 种不同的效果。当鼠标滑过按钮的时候，按钮的边框会以不同的方式进行各种动画，效果非常的炫酷。
HTML 结构
该 CSS3 按钮边框动画特效中的按钮使用 HTML 的<button>元素来制作。各种效果非标设置不同的 class。例如第一种效果的 class 为 draw。
也想出现在这里？联系我们吧
<button class="draw">draw</button>
CSS 样式
在 CSS 样式中，首先为按钮设置一些基本样式，去掉原生按钮的样式。
button {
background: none;
border: 0;
box-sizing: border-box;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
margin: 1em;
padding: 1em 2em;
text-align: center;
text-transform: capitalize;
position: relative;
vertical-align: middle;
}button::before, button::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.draw class 类只是简单的执行一个颜色过渡动画。
.draw {
-webkit-transition: color 0.25s;
transition: color 0.25s;
}
在第一种.draw 效果中，按钮的边框使用.draw 的:before 和:after 伪元素来制作。它们被设置为 2 个像素的实线，宽度和高度开始时为 0,。一条线位于按钮的左上角，另一条线位于按钮的右下角。
button::before, button::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 100%;
height: 100%;
}.draw {
-webkit-transition: color 0.25s;
transition: color 0.25s;
}.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}.draw::before {
top: 0;
left: 0;
}.draw::after {
bottom: 0;
right: 0;
}
在鼠标滑过的时候，:before 和:after 伪元素制作的线条的宽度和高度被设置为 100%，并通过设置宽度和高度相同的动画持续时间和延迟时间来制作首尾相接的线条动画效果。
.draw:hover {
color: #60daaa;
}.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
-webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
-webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
以上是第一种线条动画效果的制作方法。其它效果的 CSS 代码请参考下载文件。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
