效果演示
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>今日中秋</title>
<style>
* {padding: 0;}body {background-image: url(月圆中秋2月亮.png);background-size: cover;position: fixed;top: 0px;left: 0px;}
.box2 {border: transparent 1px solid;height: 100px;
width: 1600px;margin: 20px auto;}
.box3 {border: transparent 1px solid;height: 1100px;width: 1600px;}
.box2 img {float: left;height: auto;width: 100px;animation: t1 5.5s ease-in-out infinite;}
.box3 img:nth-of-type(1) {width: 500px;height: auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -150%);}
.box3 img:nth-of-type(2) {float: right;height: auto;width: 500px;animation: t2 10s ease-in-out infinite;}
.box3 img:nth-of-type(3) {float: left;height: auto;width: 400px;margin-top: 100px;animation: t1 10s ease-in-out infinite;}
@keyframes t1 {50% {transform: translate(50px, 10px);}100% {transform: translate(0, 0);}}
@keyframes t2 {50% {transform: translate(-80px, -110px);}100% {transform: translate(0, 0);}}</style></head><body><div class="box2"><img src="孔明灯小号1.png" /></div><div class="box3"><img src="./孔明灯2.png"><img src="孔明灯小号3.png" /></div></body></html>
