炫彩流光按鈕 CSS HTML

2021-10-20 19:14:23 字數 1027 閱讀 7813

寫在前面

你若要喜愛你自己的價值,你就得給世界創造價值。——歌德

效果圖

三個絕美的樣例

給按鈕新增乙個漸變的背景顏色

將背景的大小放大到原來的若干倍,可以自己設定,這樣做是為了讓漸變的效果更明顯,同時後續實現流光的效果

給字型設定text-shadow屬性,多設定幾個可以增加亮度

當滑鼠經過時,實現流光的效果,通過動畫改變背景的位置來實現,相當於拖動背景,讓按鈕顯示不一樣的顏色

當滑鼠經過時新增光暈的效果,通過偽元素,建乙個比原先按鈕大一點的盒子,先利用透明度為0隱藏起來,當滑鼠經過時,改變透明度為1,同時設定filter屬性,新增模糊距離,從而實現光暈的效果

炫彩流光title

>

炫彩按鈕原始碼分析

用基礎css做乙個有一點炫酷的流光按鈕,不止按鈕,只要是盒子就行。1.先定義乙個盒子當做按鈕,如我就用a標籤 button 2.先給a標籤寫基礎的樣式,比如長寬等等 guang注意 其中一些屬性用處 text transform uppercase 全部換成大寫字母。background linea...

JS頁面分解質因數(附加純CSS炫彩流光按鈕)

doctype html en utf 8 分解質因數 title body 按鈕樣式 a1 a1 hover keyframes animate 100 a1 before a1 hover before a2 style head number name num id a2 placeholde...

html css打造流光按鈕

以上是源 在body中自己有乙個button,我對button做了居中處理,用的是彈性盒模型display flex 這個屬性是加給了body,然後justify content center 主軸居中預設是水平軸,然後再align items center 交叉軸居中。button的樣式 設定寬,...