假设img文件夹里有以下三张图片(bg_effect_01.png,bg_effect_02.png,bg_effect_03.png):
HTML部分:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
body{background:#000}
.effect{width:100%;height:100vh;animation:effect 20s linear infinite;background-image:url(img/bg_effect_01.png), url(img/bg_effect_02.png), url(img/bg_effect_03.png)}
@keyframes effect{0%{opacity:0}25%{opacity:1}50%{opacity:0.2}75%{opacity:1}100%{opacity:0}0%{background-position:0px 0px, 0px 0px, 0px 0px;}50%{background-position:-100px -500px,-100px -200px,-100px -150px}100%{background-position:0px -1000px,-200px -400px,-100px -300px}}
</style>
</head>
<body>
<div class="effect"></div>
</body>
</html>