无需任何插件或者javascript,使用CSS3中的background-clip属性即可为文本设置背景和渐变效果,还可以对其增加动画效果。
该技术实现起来非常简单。 我们只需要添加一个背景(可以是渐变或图像)到我们想要影响的文本。就像下面这样:
h1 {
background:url(image_url_here);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
示例:
hover状态下,背景图动画效果
<h1>这是示例1:hover状态下,背景图动画效果</h1>
body {
padding-top:50px;
background:url(网页背景图片地址.jpg);
/* 设置图片 100% 宽度 */
background-size:cover;
}
h1 {
font-family:'PingFangSC-Light';
font-size:50px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 设置背景图 */
background:url(字体背景图片地址.jpg);
background-position:bottom;
background-size:cover;
/* 设置动画速度 */
transition:2s ease all;
}
h1:hover {
background-position:top;
}
渐变动画
<h1>这是示例2:渐变动画</h1>
body {
padding-top:50px;
background:url(网页背景图片地址.jpg);
/* 设置图片 100% 宽度 */
background-size:cover;
}
h1 {
font-family:'PingFangSC-Light';
font-size:50px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 设置背景渐变 */
background:-webkit-linear-gradient(top, #2c539e 0%,#37AAC6 50%,#2c539e 100%);
/* 设置动画 */
-webkit-animation:moving 20s ease infinite;
}
/* 创建动画 */
@-webkit-keyframes moving {
0% {
background-position: 0 0;
}
100% {
background-position: 0 500px;
}
}
背景图动画
<h1>这是示例3:背景图动画</h1>
body {
padding-top:50px;
background:url(网页背景图片地址.jpg);
/* 设置图片 100% 宽度 */
background-size:cover;
}
h1 {
font-family:'PingFangSC-Light';
font-size:50px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 使用渐变的背景图 */
background:url(字体渐变背景图.jpg);
background-size:cover;
/* 设置动画 */
-webkit-animation:moving 20s ease infinite;
}
/* 创建动画 */
@-webkit-keyframes moving {
0% {
background-position: 0 0;
}
100% {
background-position: 0 500px;
}
}
2017-08-07