CSS3 图片背景填充文字并实现动画效果
作者:admin 时间:2022-3-17 17:36:29 浏览:本文介绍如何使用CSS3实现图片背景填充文字并做成动画效果。
完整HTML代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: auto;
width: 800px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 150px;
font-weight: bold;
color: transparent;
background: url(1.jpg);
-webkit-background-clip: text;
animation: animate 8s ease 500ms infinite;
}
/* 定义关键帧 */
@keyframes animate {
from {
background-size: 50%;
}
to {
background-size: 20%;
}
</style>
</head>
<body>
<div> 卡卡网 </div>
<div> WebKaka </div>
</body>
</html>
代码解释
本实例代码很少，理解起来比较容易。
HTML只有一个DIV标签。
CSS有3个属性起关键作用：
1、-webkit-background-clip: text; 该属性作用是把图片背景裁剪到文字。
2、color: transparent; 这句也很重要，文字颜色设为透明，才能使得文字显示图片背景。
3、animation 动画属性，它能让文字背景动起来。
相关文章
相关文章
x
- 站长推荐
