web前端开发

您现在的位置是:首页>前端开发

HTML5

使用HTML5和CSS3制作遮罩文字特效

admin:杨小二时间:2019-10-17 22:28:16前端开发0次
遮罩文字特效指的是文字下面的图片被文字层遮挡住,图片只在文字中显示。这种效果使用photoshop来制作是非常简单的。现在,Webkit内核的浏览器支持CSS3的background-clip属性,它能够完成和photoshop相同的文字遮罩效果。另外,还可以使用CSS3 mask-image 属性来完成同样的效果。

遮罩文字特效指的是文字下面的图片被文字层遮挡住,图片只在文字中显示。这种效果使用photoshop来制作是非常简单的。现在,Webkit内核的浏览器支持CSS3的background-clip属性,它能够完成和photoshop相同的文字遮罩效果。

另外,还可以使用CSS3 mask-image 属性来完成同样的效果。

制作这个特效的基本HTML结构如下:

<div id="clipped-title1">

<h1>THE LION</h1>

</div>

<div id="clipped-title2">

<h1>King of the Jungle</h1>

</div>

在CSS代码中,将使用background-clip属性来剪裁文本。对两个div元素分别使用不同的背景图片,并通过webkit-text-fill-color属性设置为transparent,确保文字的填充色为透明色。

#clipped-title1 {

background: url(../images/lion.jpg) no-repeat center center;

background-size: cover;

color: #fff;

-webkit-text-fill-color: transparent;

-webkit-background-clip: text;

}

#clipped-title2 {

background: url(../images/jungle.jpg)no-repeat top center;

background-size: cover;

color: #fff;

-webkit-text-fill-color: transparent;

-webkit-background-clip: text;

cursor: pointer;

}

#clipped-title1 h1 {

font-size: 200px;

font-family: Anton, sans-serif;

text-align: center;

-webkit-transition: text-shadow 1s ease;

text-shadow: 0 0 1px rgba(0,0,0,.1);

margin: 0;

padding: 0;

}

#clipped-title2 h1 {

font-size: 110px;

font-family: Pacifico, sans-serif;

text-align: center;

-webkit-transition: text-shadow 1s ease;

text-shadow: 0 0 1px rgba(0,0,0,.1);

margin-top: -75px;

padding: 0;

}

使用Webkit Mask-Image属性创建遮罩文字

遮罩文字特效

Mask-Image属性创建遮罩文字特效

通过-webkit-mask-image属性,你可以在文字上设置图片,制作这个特效的HTML结构如下:

<div id="masked-image">

<h1>CERTIFIED ROUGH<br/>TEXTURED TEXT</h1>

</div>

在CSS中,简单的设置一些基本的CSS样式,然后通过-webkit-mask-image属性来为文字设置图片纹理。

#masked-image {

font-family: Oswald, sans-serif;

font-size: 100px;

color: #fff;

text-transform: uppercase;

border: 14px solid #fff;

border-radius: .2em;

text-align: center;

margin: 0;

display: block;

-webkit-mask-image: url(../images/rough-texture.png);

-webkit-transform: rotate(-4deg);

-moz-mask-image: url(../images/rough-texture.png);

-moz-transform: rotate(-4deg);

-o-mask-image: url(../images/rough-texture.png);

-o-transform: rotate(-4deg);

mask-image: url(../images/rough-texture.png);

transform: rotate(-4deg);

}

 

完整源码下载地址

https://tc5.us/file/21793581-403021450

 

平面设计