第三课-遮罩

来源：互联网发布：如何选购基金知乎编辑：程序博客网时间：2024/06/05 09:16

网站学习参考：
http://trentwalton.com/css3/connecting_the_dots/#2
首先要说明的是，遮罩不一定适用于所有的浏览器。
像edge完全显示不出，火狐和IE效果的体验也很差。但是支持谷歌内核的谷歌浏览器和360显示良好。
但是一旦实现出来，效果超赞有没有！我用的是一张动图做的背景，这样出来的字都是动态的了~
代码举例：

<!DOCTYPE html><html><head><style> .txt-rotate {    background: url(http://img4.duitang.com/uploads/item/201206/19/20120619164039_dGskk.gif) repeat;    margin-bottom: 35px;    margin-top: 0px;    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    -webkit-transform: rotate(-5deg);    -moz-transform: rotate(-5deg);    -o-transform: rotate (-5deg);<!--这三条用于旋转-->}h1 {    font-size: 6.5em;    letter-spacing: -6px;FONT-FAMILY:"Helvetica Neue",Helvetica,Arial,sans-serif;    line-height: 1;    font-weight: bold;}</style></head><body><div class="txt-rotate"><h1>luo yingyun</h1></div></body></html>

效果图：

0 0