炫彩按鈕原始碼分析

2022-06-24 15:36:12 字數 1351 閱讀 2722

用基礎css做乙個有一點炫酷的流光按鈕，不止按鈕，只要是盒子就行。

1.先定義乙個盒子當做按鈕，如我就用a標籤：

button
2.先給a標籤寫基礎的樣式，比如長寬等等…：

.guang
注意：其中一些屬性用處：

text-transform: uppercase; 全部換成大寫字母。

background: linear-gradient(…); 線性顏色漸變，可以改成自己要的顏色。

text-shadow: 0 0 5px white,

0 0 5px white;

寫兩行是為了讓字型更亮。

3.滑鼠經過盒子產生流光的動畫：

.guang:hover@keyframes move100%}
4.定義盒子周圍的光暈陰影：

.guang::before.guang:hover::before
注意：其中一些屬性用處：

filter: blur 濾鏡，就是讓其模糊

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


meta 


name


="viewport"


content


="width=device-width, initial-scale=1.0"


>


<


title


>document


title


>


head


>


<


style


>


*body


.guang


.guang:hover


@keyframes move


100%


} .guang::before


.guang:hover::before


style


>


<


body


>


<


a href


="#"


class


="guang"


>button


a>


body


>


html


>

炫彩流光按鈕 CSS HTML

寫在前面 你若要喜愛你自己的價值，你就得給世界創造價值。歌德 效果圖 三個絕美的樣例 給按鈕新增乙個漸變的背景顏色 將背景的大小放大到原來的若干倍，可以自己設定，這樣做是為了讓漸變的效果更明顯，同時後續實現流光的效果 給字型設定text shadow屬性，多設定幾個可以增加亮度 當滑鼠經過時，實現流...

spring原始碼分析 spring原始碼分析

1.spring 執行原理 spring 啟動時讀取應用程式提供的 bean 配置資訊，並在 spring 容器中生成乙份相應的 bean 配置登錄檔，然後根據這張登錄檔例項化 bean，裝配好 bean 之間的依賴關係，為上 層應用提供準備就緒的執行環境。二 spring 原始碼分析 1.1spr...

按鍵精靈 炫舞遊戲原始碼

imgid findimg 0 0,1366 768 按鍵精靈.bmp 起點x imgx 起點y imgy 850 676 四方向 上.bmp 下.bmp 左.bmp 右.bmp x1 起點x 494 850 y1 起點y 555 676x2 起點x 594 850 y2 起點y 628 676 4...