效果展示：
代码展示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>纯CSS3实现文字背景图滚动动画</title><style>div{width: 1000px;font-size: 150px;letter-spacing: 20px;font-weight: bold;margin: 50px auto;background: url('zz.jpg') no-repeat;/*同时这里也可以换成 gif图 那样背景动图就都不需要添加了*/text-align: center;/*设置文字透明*/color: transparent;/*设置裁剪背景 以 文件背景裁剪*/-webkit-background-clip: text;/*添加动画*/animation: move 2s alternate infinite;}/*设置动画*/@keyframes move {0%{background-position: 0 -20px;}100%{background-position: -350px -20px;}}</style></head><body><div>哎呦不错</div></body></html>
