CSS3做的遮罩效果

2024-09-05 12:17:24

字體：大中小

來源：轉載

供稿：網友

css3小技巧，使用CSS3做的遮罩效果。在css2.0時代，text是不能做漸變，以圖片做背景等，css3.0時代也是做不到的，是css3.0可以借助其他屬性來完成的。
　　 -webkit-background-clip:text; 文本裁剪
　　 -webkit-text-fill-color:transparent; 文本顏色透明
　　以上這兩樣做完后，你就可以做自己喜歡的文字了，比如加個banckground
　　這幾樣只能做到讓文本填充顏色或者背景圖片等;
　　光影的運動顯然要有位置變化，所以要用keyframes來扶助完成

<!DOCTYPE HTML><html lang=zh-cn><head><meta charset=utf-8><title>css3遮罩</title><style>*{margin:0px;padding:0px;}body{background:#000;margin:0px;padding:0px;font-size:14px;color:#fff;}.tips{width:800px;margin:0 auto;line-height:24px;padding-top:10px;}.bredcolor{color:#fff;}.shade{        position:absolute;left:50%;top:50%;margin-left:-407px;font-size:68px;font-weight: bold;color:#487a1b;        background:#333 -webkit-linear-gradient(-15deg,#000 5%,rgba(255,255,255,.7),rgba(255,255,255,.9),rgba(255,255,255,.7),#000 10%) no-repeat;        -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.6));        -webkit-background-clip:text;        -webkit-text-fill-color:transparent;        -webkit-animation:cliptexttop 3s linear infinite;        text-transform:uppercase;}@-webkit-keyframes cliptexttop{        0%{background-position:left 0;}        100%{background-position:1200px 0;}}</style></head><body><section class="tips">  <p class="bredcolor">css3小技巧:</p>       CSS3做的遮罩效果，在css2.0時代,text是不能做漸變，以圖片做背景等，css3.0時代也是做不到的，是css3.0可以借助其他屬性來完成的。<br>        -webkit-background-clip:text;  文本裁剪<br>        -webkit-text-fill-color:transparent;  文本顏色透明<br>        以上這兩樣做完后，你就可以做自己喜歡的文字了，比如加個banckground<br>        這幾樣只能做到讓文本填充顏色或者背景圖片等;<br>        光影的運動顯然要有位置變化，所以要用keyframes來扶助完成<br>        qq群:197326136<br></section><section class="shade">  css3 background-clip</section></body></html>

上一篇：CSS3太陽系星球效果圖

下一篇：JavaScript讓網頁出現漸隱漸顯的背景顏色

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注