Hello，大家好，我是城南舊客。 今天帶大家感受一下兩個美妙的屬性
-webkit-box-reflect是一個非常有意思的屬性，它讓 CSS 有能力像鏡子一樣，反射我們元素原本繪製的內容
conic-gradient ，表示圓錐漸變，是除線性漸變、徑向漸變的另外一種漸變方式，給 CSS 世界帶來了更多可能
本文將介紹一種使用 -webkit-box-reflect及conic-gradient實現光影按鈕。配合一些動態邊框動畫的按鈕，能夠營造一種很科幻的效果。
視覺效果像是這樣：
正文從下面開始~
實現一個button倒影首先，我們需要實現三個div,使其產生倒影，這個比較簡單。主要是藉助
-webkit-box-reflect: below，使其產生倒影。
簡單的代碼如下：
HTML代碼如下：
<body> <div class="btn">hello</div> <div class="btn btn1">word</div> <div class="btn btn2">！</div> </body><style>body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; }.btn { position: relative; z-index: 0; width: 160px; height: 80px; line-height: 80px; color: #d8f051; font-size: 24px; border-radius: 10px; text-align: center; margin: auto; overflow: hidden; cursor: pointer; transition: 0.3s; -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.4)); }</style>其中，below 可以是 below | above | left | right 代表下上左右，也就是有 4 個方向可以選。我們就可以得到這樣一個 button 文字倒影效果：
實現圓錐漸變以及其他動效
這個效果已經有了初步的 倒影，但是僅僅是這樣，感覺不具有科幻性。接下來我們就需要補充一下其他動效，使其更加炫酷！
對上面css代碼我們簡單改造一下，加上圓錐漸變：
.btn::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150%; height: 300%; background-color: #000; background-repeat: no-repeat; background-size: 50% 50%; background-position: 0 0; background-image: conic-gradient(#d8f051, #d8f051); animation: rotate 2s linear infinite; }完整的代碼大概是這樣：
.btn { position: relative; z-index: 0; width: 160px; height: 80px; line-height: 80px; color: #d8f051; font-size: 24px; border-radius: 10px; text-align: center; margin: auto; overflow: hidden; cursor: pointer; transition: 0.3s; -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.4)); } .btn:hover { color: #fff; box-shadow: 0 0 5px #d8f051, 0 0 25px #d8f051; } .btn:hover::after, .btn:hover::before { transition: 0.3s; background: #d8f051; } .btn::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150%; height: 300%; background-color: #000; background-repeat: no-repeat; background-size: 50% 50%; background-position: 0 0; background-image: conic-gradient(#d8f051, #d8f051); animation: rotate 2s linear infinite; } .btn::after { content: ""; position: absolute; z-index: -1; left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); background: #000; border-radius: 10px; }
.btn1 { filter: hue-rotate(180deg); }
.btn2 { filter: hue-rotate(270deg); } @keyframes rotate { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
這樣，我們可以最終得到如下效果：詳細解析，你可以戳這裡
利用 box-reflect、 conic-gradient 實現光影按鈕
https://blog.csdn.net/muzili1006/article/details/121399654?spm=1001.2014.3001.5501最後好了，本文到此結束，希望對你有幫助 :)
如果還有什麼疑問或者建議，可以多多交流。可留言
如果覺得這篇文章還不錯，來個【轉發、點讚】雙擊吧，讓更多的人也看到~