国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

每天一個(gè)CSS

BetaRabbit / 1979人閱讀

摘要：每天堅(jiān)持一個(gè)滾動(dòng)文字效果圖圖片描述箭頭指向部分，以白色為背景，從左向右滾動(dòng)。說(shuō)明漸變類型，線性漸變?cè)O(shè)置漸變?yōu)閺挠业阶蟆?/p>

每天堅(jiān)持一個(gè)CSS-------滾動(dòng)文字 效果圖 

圖片描述：箭頭指向部分，以白色為背景，從左向右滾動(dòng)。（不適用于IE）
代碼 html 
   
例子：


滾動(dòng)的文字，我是滾動(dòng)的文字
CSS 
.box {
    height: auto;
    background-color: blue;
}

.box-text{
    color: white;
    background: -ms-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: slidetounlock 3s infinite;
    -webkit-animation: slidetounlock 3s infinite;
}

@-webkit-keyframes slidetounlock{
    0%  {
        background-position:-200px 0
    }
    
    100% {
        background-position:200px 0
    }
}
實(shí)現(xiàn)原理

1、動(dòng)畫效果

@-webkit-keyframes

定義一組動(dòng)畫，在本動(dòng)畫中，將背景的位置進(jìn)行了改變（注意是文本的位置）

2、背景為何選擇到文本而不是整塊背景？

background-clip: text;

作用：指定繪圖區(qū)的背景
除了text外，還包括 ：border-box|padding-box|content-box;三個(gè)屬性

3、怎么實(shí)現(xiàn)一小段的變化效果的呢？

gradient()

作用：漸變
從實(shí)際效果中看到，白色部分之外都是灰色，越是靠近白色，就越白。

-ms-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
說(shuō)明：漸變類型，線性漸變（z=x*y）
to left：
設(shè)置漸變?yōu)閺挠业阶蟆Ｏ喈?dāng)于: 270deg
to right：
設(shè)置漸變從左到右。相當(dāng)于: 90deg
to top：
設(shè)置漸變從下到上。相當(dāng)于: 0deg
to bottom：
設(shè)置漸變從上到下。相當(dāng)于: 180deg。這是默認(rèn)值，等同于留空不寫。

這樣就實(shí)現(xiàn)了漸變字體部分

-webkit-text-fill-color: transparent;

字體填充顏色：繼承與背景，所以字體顏色為設(shè)置的box-text的background ,而非box的背景顏色。

就這樣加上一個(gè)動(dòng)畫，循環(huán)移動(dòng)，就是實(shí)現(xiàn)了。

PS:歡迎一起學(xué)習(xí)，等服務(wù)器備案通過(guò)，會(huì)將所有案例發(fā)布至服務(wù)器上。

demo地址： everyDay

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113942.html

相關(guān)文章

  • 每天堅(jiān)持一個(gè)CSS——社會(huì)人

    摘要：每天一個(gè)社會(huì)人實(shí)現(xiàn)效果想法之前看到一篇博客，使用繪制出了小豬佩奇，所以自己想試一試，采用純繪制出低配版的小豬佩奇。在布局上，沒(méi)有堅(jiān)持嵌套，導(dǎo)致縮放時(shí)位置錯(cuò)位，如果想實(shí)行縮放一致，可采用小豬的頭部嵌套布局實(shí)現(xiàn)。 每天一個(gè)CSS-社會(huì)人 實(shí)現(xiàn)效果 showImg(https://segmentfault.com/img/remote/1460000016461611?w=667&h=620...

    Eidesen 評(píng)論0 收藏0

  • 撩課-Web大前端每天5道面試題-Day1

    摘要：的變量提升的底層原理是什么引擎的工作方式是先解析代碼，獲取所有被聲明的變量然后在運(yùn)行。引用計(jì)數(shù)這種方式常常會(huì)引起內(nèi)存泄漏，低版本的使用這種方式。1. var的變量提升的底層原理是什么? JS引擎的工作方式是: 1) 先解析代碼，獲取所有被聲明的變量； 2)然后在運(yùn)行。也就是說(shuō)分為預(yù)處理和執(zhí)行兩個(gè)階段。 變量提升：所有變量的聲明語(yǔ)句都會(huì)被提升到代碼頭部。 但是變量提升只對(duì)var命令聲明的變...

    番茄西紅柿 評(píng)論0 收藏0

  • 前端面試每日 3+1 —— 第133天

    摘要：學(xué)習(xí)不打烊，充電加油只為遇到更好的自己，天無(wú)節(jié)假日，每天早上點(diǎn)純手工發(fā)布面試題死磕自己。希望大家在這浮夸的前端圈里，保持冷靜，堅(jiān)持每天花分鐘來(lái)學(xué)習(xí)與思考。 今天的知識(shí)點(diǎn) (2019.08.27) —— 第133天 [html] canvas默認(rèn)畫布的尺寸是多大？怎樣設(shè)置才能不會(huì)變形？ [css] 如何使用css3實(shí)現(xiàn)一個(gè)div設(shè)置多張背景圖片？ [js] 寫一個(gè)方法，將字符串中的...

    ivydom 評(píng)論0 收藏0

  • 每天打開頁(yè)面，只彈一次提示框。

    摘要：手機(jī)推出新功能鄰里互撩讓溝通無(wú)障礙群組模式讓群聊嗨起來(lái)前往當(dāng)前時(shí)間戳當(dāng)前日期當(dāng)日凌晨的時(shí)間戳減去一毫秒是為了防止后續(xù)得到的時(shí)間不會(huì)達(dá)到的狀態(tài)當(dāng)日已經(jīng)過(guò)去的時(shí)間毫秒當(dāng)日剩余時(shí)間創(chuàng)建為想要取到的鍵值的鍵名 html: e手機(jī)App推出新功能 鄰里互撩,讓溝通無(wú)障礙! 群組模式,讓群聊嗨起來(lái)! 前往eApp js:$(function(){ f...

    stackvoid 評(píng)論0 收藏0

  • 前端面試每日3+1（周匯總2019.08.25）

    摘要：前端面試每日題，以面試題來(lái)驅(qū)動(dòng)學(xué)習(xí)，每天進(jìn)步一點(diǎn)讓努力成為一種習(xí)慣，讓奮斗成為一種享受相信堅(jiān)持的力量項(xiàng)目地址前端面試每日推薦歡迎跟一起折騰前端，系統(tǒng)整理前端知識(shí)，目前正在折騰，打算打通算法與數(shù)據(jù)結(jié)構(gòu)的任督二脈。 《論語(yǔ)》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面試每日3+1題，以面試題來(lái)驅(qū)動(dòng)學(xué)習(xí)，每天進(jìn)步一點(diǎn)！ 讓努力成為一種習(xí)慣，讓奮斗成為一種享受！相信 堅(jiān)持 的力量...

    Java3y 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<