CSS技巧专栏：一日一例 9 -纯CSS实现按钮边框依次填充特效
CSS技巧专栏：一日一例 9 -纯CSS实现按钮边框依次填充特效
在本篇，我们分享一个和上一篇文章看起来很像的按钮，但实际上，却不是使用相同的技巧实现的。还是老规矩，先发图片，感兴趣的同学可以继续看。
特此说明
本专题专注于讲解如何使用CSS制作按钮特效。前置的准备工作和按钮的基本样式，都在本专栏第一篇文章中又详细说明。自本专栏第四篇文章起，本专栏都将直接跳过前面的内容（清除浏览器默认设置样式，按钮基础样式），不再重复复制，需要了解按钮基础样式的同学，请移步：《CSS技巧 - 一日一例 （1）：会讨好的热情按钮》。
本例图片
观察分析
仔细观察这个按钮，这个按钮其实就是两层边框就够了。一层是黑色框，一层是粉色框。重点是如何让粉色的边框依次去替换黑色的。
布局代码
<div class="container">
<button class="base border_btn">等我把你围起来</button>
</div>基础样式
:root{
--main-bg-color: #000;
--color:#000;
--hover-color:#993399;
}
button{
margin: 0.3em;
outline: 0;
border: none;
}
.base{
position: relative;
padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */
font-family: "微软雅黑", sans-serif;
font-size: 1.5rem;
line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */
font-weight:700;
color: var(--color); /* 文字颜色为预定义的前景色 */
cursor: pointer; /* 鼠标移动到按钮上时候的形状：手型 */
user-select: none; /* 让用户不能选择按钮上的文字 */
white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */
border-radius: 2rem;
text-decoration: none;
text-transform:uppercase; /* 字母自动修正为大写 */
transition: all .5s; /* 按钮响应动画效果的持续时间 */
margin: 1.5rem 2rem;
}按钮样式
.border_btn {
position: relative;
box-shadow: inset 0 0 0 5px #666;
color: #666;
transition: color 1s;
border-radius: 0rem; /* 去掉base样式中的圆角 */
box-reflect: below 5px linear-gradient(transparent, rgba(0, 0, 0, .15));/* 倒影 */
-webkit-box-reflect: below 5px linear-gradient(transparent, rgba(0, 0, 0, .15)); /* 倒影 */
}在这个按钮的样式表里没有写border，而是利用box-shadow内阴影属性弄模拟了边框。其实使用border也是可以实现同样效果的，只是要稍微调整一下before 和 after 层的位置。
接着再写用来响应鼠标悬停动画的边框，还是老办法，利用它的 before 和 after 两个伪元素。
.border_btn::before,
.border_btn::after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
border-radius: 0rem;
box-sizing: border-box;
border: 5px solid transparent;
}这次就直接写border就好了。border的定位与按钮对齐。
悬浮动画
.rectangle {
&::after {
top: unset;
left: unset;
right: 0;
bottom: 0;
}
&:hover {
color: var(--hover-color);
&::before {
transition: width .5s, height .5s, border-bottom-color 0s;
transition-delay: .5s, 0s, .5s;
width: 100%;
height: 100%;
border-left: 5px solid var(--hover-color);
border-bottom: 5px solid var(--hover-color);
}
&::after {
transition: width 1.5s, height .5s, border-top-color .5s;
transition-delay: 1.5s, 1s, 1.5s;
width: 100%;
height: 100%;
border-top: 5px solid var(--hover-color);
border-right: 5px solid var(--hover-color);
}
}
}为了让动画变的慢一点，我将时间间隔调整的比较大。你若是希望快一点，可以修改
.rectangle {
&::after {
top: unset;
left: unset;
right: 0;
bottom: 0;
}
&:hover {
color: var(--hover-color);
&::before {
transition: width .25s, height .25s, border-bottom-color 0s;
transition-delay: .25s, 0s, .25s;
width: 100%;
height: 100%;
border-left: 5px solid var(--hover-color);
border-bottom: 5px solid var(--hover-color);
}
&::after {
transition: width .25s, height .25s, border-top-color .5s;
transition-delay: 0.75s, 0.5s, 0.75s;
width: 100%;
height: 100%;
border-top: 5px solid var(--hover-color);
border-right: 5px solid var(--hover-color);
}
}
}好了，刷新浏览器试试？
诶？怎么没动呢？？？
--------------------------- 画外音忍不住要吐糟了：你TM没有把动画类写在按钮上！
哦哦哦！快点补上：
<button class="base border_btn rectangle">等我把你围起来</button>再去刷新浏览器，这下可以了！看看动画效果：
知识点：CSS中的&代表的什么
& 表示嵌套的上一级
这是sass的语法，代表上一级选择器，比如：
ol{
margin-top: 20px;
& >li {
margin-top: 0;
}
}编译成css写法：
ol{margin-top: 20px;}
ol > li {margin-top: 0;}顺便说明一下 ">"，后面会有详细文章说明css的选择器
" > " 子选择器：通过指定元素的直接子元素关系选择 HTML 元素。子元素选择器使用 > 符号分隔父元素和子元素。例如，
ul>li{ color:red; }ul > li 表示：将选择所有 ul 元素的直接子元素li中的元素。
按钮完成
今天的这一篇就到这里了！感谢您的阅读！再见！小伙伴们，别忘了点赞收藏哦！
本专栏其他文章：
CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效
CSS技巧专栏：一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效
CSS技巧专栏：一日一例 5-纯CSS实现背景色从四周向中心填充的按钮特效
CSS技巧专栏：一日一例 6 - 纯CSS实现粉红色跳出来的立体按钮特效
CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效
CSS技巧专栏：一日一例 8 - 纯CSS利用mask属性实现按钮边框对称包围特效
原文地址：https://blog.csdn.net/uuplay0216/article/details/140555224
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！