CSS3 图片背景填充文字并实现动画效果
本文介绍如何使用CSS3实现图片背景填充文字并做成动画效果。
demodownload
完整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 动画属性，它能让文字背景动起来。
相关文章
- CSS3背景图片填充文字【实例演示/源码下载】
- CSS3实现段落第一个文字放大【实例演示/源码下载】
- 3行CSS代码实现文字镂空(动画)效果【演示/源码下载】
- 纯CSS 6款文字动画(跳动、浮动、转动、翻转、碰撞)
- 如何使用CSS为文本添加渐变叠加【实例】
- css3实现的彩色渐变描边文字效果
- 纯CSS实现文字渐变和文字扫光动画效果
- CSS实现文字颜色渐变效果
