国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<del id="30l34"><pre id="30l34"></pre></del>

文字效果用背景漸變實現(xiàn) 波浪背景文字

2年前作者：薩拉楊分類：Toy博客閱讀(32)違法舉報

這篇具有很好參考價值的文章主要介紹了文字效果用背景漸變實現(xiàn) 波浪背景文字。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

1. 實現(xiàn)波浪背景

div{
  width: 400px;
  height: 200px;
  outline: 2px dashed gray;
  --c: #2196F3;
  --w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat;
  --w2: radial-gradient(100% 57% at bottom, var(--c) 100%,#0000 100.5%) no-repeat;
  background: var(--w1),var(--w2),var(--w1),var(--w2);
  background-position-x: -200%, -100%, 0%, 100%;
  background-position-y: 100%;
  background-size: 50.5% 100%;
  animation: m 1s infinite linear;
}
@keyframes m {
  0%  {background-position-x:-200%, -100%, 0%, 100%}
  100%{background-position-x:  0%, 100%, 200%, 300%}
}

原理：透明到純色的徑向漸變，然后復(fù)制該漸變背景，最后加上背景水平方向移動的無限循環(huán)動畫

2. 文字波浪背景

將該漸變應(yīng)用在文本標(biāo)簽上，并添加一下css屬性

{
  font-size: 100px;
  font-weight: bold;
  color: transparent;
  -webkit-background-clip: text; /*文本裁切*/
  -webkit-text-stroke: 2px var(--c); /*文本內(nèi)描邊*/
}

最后，在做一些適當(dāng)調(diào)整，比如弧度銜接處動畫時間等。搞定

3. 總結(jié)

波浪的本質(zhì)上是一個曲面在水平方向的周期性運動，曲面本身并沒有變化
波浪可以拆分為兩個不同方向上的徑向漸變
特別需要注意漸變的尺寸和位置，確保能夠完美的銜接在一起
動畫其實就是不斷改變漸變的水平位置，也就是?background-position-x
相比于其他實現(xiàn)，漸變的最大優(yōu)勢是不占用任何標(biāo)簽
還可以輕易的實現(xiàn)文字波浪效果

注：文章來源于前端偵探?，作者XboxYan，《這個文字波浪動畫，真酷！》文章來源地址http://www.zghlxwxcb.cn/news/detail-475449.html

到了這里，關(guān)于文字效果用背景漸變實現(xiàn) 波浪背景文字的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

【CSS】透明背景的圓角漸變邊框?qū)崿F(xiàn)方案
css的漸變邊框可以用下面方式實現(xiàn) css的圓角邊框可以用下面方式實現(xiàn) 那想要實現(xiàn)一個圓角的漸變邊框呢，可能會以為，兩個都用上不就可以了，但事實是，這兩個屬性并不兼容，所以要實現(xiàn)一個圓角的漸變邊框，就得需要曲線救國的方法了最終效果圖 ? ?
2024年02月13日
瀏覽(36)
Cocos2d-x實現(xiàn)文字顏色漸變
更改CCLabel文件的updateColor()函數(shù)中的頂點顏色即可，代碼如下：效果圖： ?
2024年02月12日
瀏覽(30)
labview實現(xiàn)呼吸燈顏色漸變效果
呼吸燈效果具有美好的視覺觀感，前一段時期感受了一位大佬在MCU中實現(xiàn)呼吸燈顏色漸變效果，很是震撼。這引起了我的興趣，本文則是實現(xiàn)一種呼吸燈效果(主要在于顏色的漸變體現(xiàn))。
2024年02月17日
瀏覽(13)
【第四趴】uni-app頁面導(dǎo)航欄配置（掌握頁面導(dǎo)航欄背景顏色、文字等效果配置）
聚沙成塔——每天進步一點點，大家好我是幾何心涼，不難發(fā)現(xiàn)越來越多的前端招聘JD中都加入了uni-app 這一項，它也已經(jīng)成為前端開發(fā)者不可或缺的一項技能了，所以涼哥為大家推出聚沙成塔【45天玩轉(zhuǎn)uni-app】專欄，幫助大家對 uni-app 進行學(xué)習(xí)和理解，uni-app可以通過一套代
2024年02月01日
瀏覽(20)
【Kotlin】使用 ProgressBar 的樣式屬性來實現(xiàn)圓形進度條，進度使用gradient漸變效果
Android ProgressBar 默認提供了水平和圓形兩種進度條，水平進度條通過 ProgressBar 控件實現(xiàn)，而圓形進度條通過 ProgressDialog 控件實現(xiàn)。如果想要將 ProgressBar 控件設(shè)置為圓形進度條，可以使用 ProgressBar 的樣式屬性來實現(xiàn)。首先，在布局文件中添加一個 ProgressBar 控件，并設(shè)置其樣
2024年02月10日
瀏覽(23)
簡單的 CSS3 波浪效果
效果圖：
2024年02月15日
瀏覽(15)
Android背景Shape顏色漸變—線性漸變
Android背景顏色漸變可以通過在res/drawable里定義一個xml文件（xml文件名稱可根據(jù)個人定義）：一、 color_gradient. xml代碼： 1、 android:angle 漸變方向角度 2、 android:startColor 開始顏色 3、 android:centerColor 中間顏色 4、 android:endColor 結(jié)束顏色 5、 android:type 漸變類型，線性linear 二、在你
2024年02月09日
瀏覽(21)
CSS 設(shè)置漸變背景 CSS 設(shè)置漸變邊框
一、css漸變背景添加透明度opacity css漸變背景經(jīng)常會在項目開發(fā)中遇到，此時UI如果給出的是單一的漸變背景（沒有背景透明度），這個我們會很快的寫出代碼，如下: 但偶爾的時候UI會給煎餅的背景色添加一個透明度，但是使用 opacity屬性會導(dǎo)致文本也會有透明度，接下來給
2024年02月09日
瀏覽(21)
前端必學(xué)的CSS3波浪效果演示
使用 translateX 和 translateZ 屬性創(chuàng)建波浪效果：使用場景：適用于需要在X軸上平移和在Z軸上應(yīng)用3D變換的波浪效果。可以用于創(chuàng)建具有起伏效果的海浪、水面波紋等效果。優(yōu)點：通過3D變換，可以實現(xiàn)更加真實的波浪效果。可以通過調(diào)整 translateX 和 translateZ 的值來控制波浪
2024年02月02日
瀏覽(22)
HTML漸變效果：線性漸變與徑向漸變詳解
????????在HTML中，你可以使用CSS來創(chuàng)建漸變效果，給元素添加豐富的背景樣式。本文將詳細介紹HTML中的漸變效果，并提供示例代碼幫助你理解和應(yīng)用。線性漸變通過沿一條直線給元素應(yīng)用顏色的漸變效果。你可以定義起始點和結(jié)束點之間的顏色過渡方式。使用角度定義
2024年02月16日
瀏覽(16)