零基礎HTML素材積累,7個按鈕把CSS HOVER 的創意發揮到極致了
經過一段時間的醞釀,我決定繼續開啟頭條文章的發布。
1. 將自己平常工作學習中的素材積累,分享在頭條號。既能加深記憶,又能為大家帶來分享。
2. 標題為零基礎HTML的意思很簡單,我希望讓HTML這個前端語言變成每一位網友都熟知的語言。因為它其實並不複雜,甚至可以說它就是計算機語言中的「美圖秀秀」
3. 如有想加深學習進度的小夥伴,請私信我。
廢話不說了,開始 零基礎HTML素材積累01 CSS HOVER的7個按鈕
CSS hover 樣式很簡單,但是想創造出有意思、實用、有創意性的特效是很考驗設計師的創意能力,所以設計達人每隔一段時間都會分享一些與滑鼠點擊、懸停的相關特效,以便大家獲得更好的創造靈感。
Advertisements
今天我們整理了10組網頁按鈕的點擊與懸停效果,每組都有不同的特色以及創意性,下面達人將特效錄製成 GIF 動圖,方便大家在線觀看
查看演示: 私信九弓子:css hover (獲取源碼演示鏈接)
01、點擊漣漪效果
這是 Material Design 的按鈕點擊風格,點擊時帶有一個波紋漣漪效果,而且還有一個特色就是,按鈕使用了漸變顏色,讓按鈕更加形象突出。
02、泡沫按鈕效果
當滑鼠經過按鈕時,按鈕會出現像「分離」的效果,很好看,需要 SVG 與 JS 結合才能實現。
03、遮罩效果按鈕
04、Weeeeee
這個動畫錄製時出現些問題,建議大家直接看在線演示。
05、斑點按鈕
Advertisements
06、會傾斜的按鈕
當滑鼠向左點擊的時候,按鈕會向左邊微斜,點擊右邊會就向邊傾斜……
07、電波按鈕
滑鼠懸停到按鈕上時,按鈕像很不穩定一樣,隨時消失……
查看演示: 私信九弓子:css hover (獲取源碼演示鏈接)