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
