[分享]css3文字遮罩效果代码

CSS3提供了各种文字遮罩效果，让我们的网页有更多的创意和视觉效果。下面是一些常见的CSS3文字遮罩效果及示例代码。1. 渐变遮罩效果.mask { background: lineargradien...

CSS3提供了各种文字遮罩效果，让我们的网页有更多的创意和视觉效果。下面是一些常见的CSS3文字遮罩效果及示例代码。

1. 渐变遮罩效果

.mask {
   background: linear-gradient(to right, #fff 20%, transparent 80%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
} 

2. 边框遮罩效果

.mask {
   color: #fff;
   -webkit-text-stroke: 1px #000;
} 

3. 印章遮罩效果

.mask {
   text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000, 5px 5px 0 #000;
} 

4. 打字机遮罩效果

.mask {
   white-space: nowrap;
   overflow: hidden;
   animation: typing 4s steps(20) infinite;
}
@keyframes typing {
   from { width: 0; }
} 

5. 图片遮罩效果

.mask {
   font-family: Arial, sans-serif;
   font-size: 72px;
   color: #fff;
   text-align: center;
   background: url('mask.jpg') repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
} 

以上是一些常见的CSS3文字遮罩效果，希望可以给您带来帮助和灵感。