CSS3實現(xiàn)文字波浪線效果示例代碼

前言
css的設(shè)計之巧妙,實現(xiàn)之精妙,細細尋味,其妙非凡,妙不可言。這波浪線,取巧的運用了linear-gradient屬性,合角度、顏色、位置于一體,配合background-size,background-repeat,化一為多,平滑過渡。哇,這最后的效果太巧秒了!塵世間沒有詞來形容了……
——題記,改編自《食神》
實現(xiàn)方法
語法:linear-gradient(direction, color-stop 1, color-stop 2,……)
簡單用法:background-image: linear-gradient(red, transparent);
增加角度,linear-gradient(45deg, red, transparent)
加個position:linear-gradient(45deg, red, transparent 45%)
加個colorlinear-gradient(45deg, red, transparent 45%,red)
不知道大家看到這里,有沒有如看到一番明鏡,頓悟了。
linear-gradient(45deg, transparent 45%, red 55%, transparent 60%)
linear-gradient(135deg, transparent 45%, red 55%, transparent 60%)
把這兩個線結(jié)合。
結(jié)合
看到這里,你知道怎么達到波浪線效果了么?^_^
高度為原來的1/2
最終代碼:
文字波浪線效果
總結(jié)
好了,這樣就實現(xiàn)了,以上就是這篇文章的全部內(nèi)容了,希望對大家學(xué)習(xí)或者使用CSS3能有所幫助,如果有疑問大家可以留言交流。
相關(guān)文章
- 本篇文章主要介紹了純CSS實現(xiàn)波浪移動效果的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-15
純css3制作鼠標(biāo)懸停波浪形狀彈性下拉菜單特效源碼
純css3制作鼠標(biāo)懸停波浪形狀彈性下拉菜單特效源碼,當(dāng)鼠標(biāo)懸停波浪形菜單欄,彈出列表信息,鼠標(biāo)離開自動收縮。效果非常逼真,本段代碼可以在各個網(wǎng)頁使用,有需要的朋友可2017-12-18- 這是一款基于css3實現(xiàn)逼真的波浪起伏動畫特效源碼。畫面上3層波浪涌動構(gòu)成此起彼伏、連綿不斷的波浪涌動視覺效果2017-07-27
- CSS3實現(xiàn)的波浪閃動文字動畫特效源碼是一款炫酷文字動畫特效,總共有4種效果,有波浪文字效果,文字閃動效果等多種效果,同時實現(xiàn)的這四類效果中,都可以到處相應(yīng)的.css文2017-01-25
純css3實現(xiàn)的音階波浪loading加載動畫特效源碼
這是一款采用純css3實現(xiàn)的音階波浪loading加載動畫特效源碼??沙尸F(xiàn)出由中間向兩邊上下波動的loading加載效果2016-12-27- 這是一款采用純css3實現(xiàn)的文字波浪動畫特效源碼,畫面上的文字呈現(xiàn)出帶有3D立體凹凸?jié)u變效果的波浪動畫,該特效沒有引入任何外部圖形元素,且漸變效果流暢自然2016-05-28
- 我們分享過許多各種各樣的CSS3菜單,應(yīng)該說效果都比傳統(tǒng)的CSS菜單強悍。這次要分享的這款CSS3菜單有點特別,菜單的整體形狀類似波浪形,鼠標(biāo)滑過菜單項時也會改變背景色表2014-10-18
- 一款3D波浪形動畫特效。利用一堆div加上CSS3對每個div的控制2014-06-04
CSS Houdini實現(xiàn)動態(tài)波浪紋效果
這篇文章主要介紹了CSS Houdini實現(xiàn)動態(tài)波浪紋效果,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-30