第三课-遮罩

最新推荐文章于 2022-11-14 22:29:05 发布

wuli_luo

最新推荐文章于 2022-11-14 22:29:05 发布

阅读量241

点赞数

分类专栏：众妙之门-CSS3 文章标签： CSS3 遮罩

本文链接：https://blog.csdn.net/u014594974/article/details/50589026

版权

众妙之门-CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网站学习参考：

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>

效果图：