CSS技巧专栏：一日一例 8 - 纯CSS利用mask属性实现按钮边框对称包围特效
上篇作业解题
在前一篇文章的最后，给各位看官留了一个作业，如上图所示。本篇文章，我们来公布一下它的源码。
主要实现的思路
- 四个渐变色的线段，沿着四个方向的依次运动，（运动在加载前执行）
- 使用 按钮的 before 和after 伪类创建两个层，在鼠标移动到按钮上时候，分别从水平和垂直方向变化。
HTML页面结构
<button class="base shine"><span></span><span></span><span></span><span></span>蓬门今始为君开
</button>按钮基础样式
.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;
}样式表CSS代码
/* 边框流光按钮 */
.shine {position: relative;display: inline-block; color: #ffcc00;text-transform: uppercase;transition: 0.2s; overflow: hidden;background:var(--main-bg-color);border-radius: 0px; -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0, 0, 0, .2)); border:1px solid rgba(255, 217, 102,0.2); text-shadow: 1px 1px 0px rgba(255,255,255,0);/* filter: hue-rotate(120deg); */
}
.shine:after,.shine:before{position: absolute;content: '';top:50%;left: 0;right: 0;bottom: 50%;background-image: linear-gradient( #e6b800, #ffcc00, #ffe680, #ffcc00, #e6b800);t
