CSS技巧专栏：一日一例 8 - 纯CSS利用mask属性实现按钮边框对称包围特效

鱼仰泳

已于 2024-07-26 19:15:24 修改

阅读量729

点赞数 11

分类专栏： CSS技巧分享：每日一例文章标签： css 前端

于 2024-07-18 17:41:41 首次发布

本文链接：https://blog.csdn.net/uuplay0216/article/details/140528972

版权

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);
  transition: 0.2s;
  z-index: -30;   
}
.shine:hover {
  color: #111;
  text-shadow: 2px 2px 1px rgba(255,255,255,0.4);
  /* box-shadow: 0 0 25px #ffcc00, 0 0 50px #ffcc00, 0 0 100px #ffcc00;*/
}
.shine:before{
  top