摘要:是因為動畫的結(jié)束后的最后一幀的顏色為,立馬會重新執(zhí)行動畫,顏色會初始到第一幀,所以會有明顯的變化。的效果就是背景顏色被剪裁到文字上面,只有文字會顯示背景顏色。用數(shù)字表達結(jié)合以上三個屬性結(jié)合動畫,最終實現(xiàn)文字漸變的效果。
瀏覽 Animate.css官網(wǎng) 的時候發(fā)現(xiàn)Animate.css這幾個字母的顏色會慢慢變化,個人覺得還是很有意思,本以為是利用animate 改變color,結(jié)果F12后發(fā)現(xiàn)好多奇怪的css屬性。
先來看看我的實現(xiàn)方法
簡易實現(xiàn)方法h2{ height: 60px; color: #f35626; -webkit-animation: hue 6s infinite linear; } @-webkit-keyframes hue { from { color: #f35626; } to { color: #feab3a; } }
通過通過css3的動畫屬性可以輕松改變文字的顏色,但是這里有一個小問題,就是動畫執(zhí)行一個輪回結(jié)束后,顏色有一個明顯變化過程。是因為動畫的結(jié)束后的最后一幀的顏色為#feab3a,立馬會重新執(zhí)行動畫,顏色會初始到第一幀#f35626,所以會有明顯的變化。我們稍微改變一下動畫的寫法。
@-webkit-keyframes hue { 0%{ color: #f35626; } 50% { color: #feab3a; } 100%{ color: #f35626; } }
這樣開始和結(jié)束都是同樣的顏色,動畫輪回顏色就不會突變了。
Animate.css寫法先看看Animate的寫法
h2{ height: 60px; color: #f35626; background: coral; background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: hue 6s infinite linear; } @-webkit-keyframes hue { from { -webkit-filter: hue-rotate(0deg); } to { -webkit-filter: hue-rotate(-360deg); } }
linear-gradient線性漸變,以前是用到過,但是background-clip, text-fill-color, -webkit-filter: hue-rotate,這些屬性感覺好陌生,查閱相關資料后才進一步認識這些屬性,下面一步步來了解這些屬性吧。
background-clip
text-fill-color
filter: hue-rotate
background-clipCSS3 屬性 規(guī)定背景的繪制區(qū)域 W3school上面只展示了三個值 CSS3 background-clip 屬性
border-box # 背景被裁剪到邊框盒。 padding-box # 背景被裁剪到內(nèi)邊距框。 content-box # 背景被裁剪到內(nèi)容框。
上面用到的-webkit-background-clip: text; 必須加上-webkit-前綴,不然瀏覽器不能正常渲染。text的效果就是背景顏色被剪裁到文字上面,只有文字會顯示背景顏色。這個屬性可以做類似ktv里面歌詞視圖的效果。具體效果參考 犀利的background-clip:text,實現(xiàn)K歌字幕效果
text-fill-colortext-fill-color,表示文字顏色填充,實現(xiàn)的效果基本上與color一樣,會覆蓋color所定義的字體顏色.也支持一個transparent屬性,也就是透明填充。
filter: hue-rotatehue-rotate用來設置對象的色相旋轉(zhuǎn)。用0-360數(shù)字表達
結(jié)合以上三個屬性結(jié)合動畫,最終實現(xiàn)文字漸變的效果。
透明度漸變.maskImage { color: red; height: 600px; //background: black; -webkit-mask-image: -webkit-gradient(linear,center top,center bottom,color-stop(0,transparent),color-stop(.3,#000),color-stop(1,#000)); }總結(jié)
隨著對CSS3越發(fā)的了解,深深的感受到CSS3的潛力越來越大,配合css3能夠輕松實現(xiàn)各種酷炫效果。當然瀏覽器兼容是個大問題。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/112807.html
摘要:屬性指定了列與列間的邊框樣式屬性指定了兩列的邊框厚度屬性指定了兩列的邊框顏色屬性是所有屬性的簡寫。屬性指定了列的寬度。多媒體查詢代碼除那些設備特定的媒體類型代碼 線性漸變 linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet)linear-gradient(指定漸變方向, 顏色的起點,顏色的結(jié)束) 文本...
css3新增選擇器 屬性選擇器 包括h5中新增的自定義屬性 p[data-id]{color: red} sasas 屬性選擇器可以指定屬性值 的樣式變化 E[attr=value] 指定屬性名 p[data-id=111]{color: red} sasas1 sasas2 sasas3 只有第一行才會...
摘要:必須要準確的放置否則聲明無效。倒影設置元素的倒影準確的來說不能算是的東西,但需要知道。默認值不可繼承背景漸變漸變是在中新增加的圖片類型使用漸變可以在兩種顏色間制造出平滑的漸變效果用它代替圖片,可以加快頁面的載入時間減小帶寬占用。 CSS3主要內(nèi)容 一、CSS選擇器 ? CSS3選擇器規(guī)范地址: https://www.w3.org/TR/2011/RE...? ...
閱讀 2595·2021-11-17 09:33
閱讀 3936·2021-10-19 11:46
閱讀 910·2021-10-14 09:42
閱讀 2252·2021-09-22 15:41
閱讀 4204·2021-09-22 15:20
閱讀 4628·2021-09-07 10:22
閱讀 2302·2021-09-04 16:40
閱讀 811·2019-08-30 15:52