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
