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

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