版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片动画</title>
<style type="text/css">
html,body{
height: 100%;/*高度使用百分比,body的高度是100%*/
}
*{
margin: 0;
padding: 0;
}
#box{
width: 100%;
height: 100%;
position: relative;
background: url(bg.jpg);
}
#box img{
width:200px ;
height: 200px;
position: absolute;
left: 46%;
top: 38%;
animation: move 5s linear infinite;
opacity: 0;
}
#box img:nth-child(2){
animation: move 5s 2s linear infinite;
}
#box img:nth-child(3){
animation: move 5s 4s linear infinite;
}
#box img:nth-child(4){
animation: move 6s 5s linear infinite;
}
@keyframes move{
/*from{}0%
to{}100%
/*/
0%{
transform: scale(1);
opacity: 0;
}
25%{
transform: scale(1.5);
opacity: 0.5;
}
50%{
transform: scale(2);
opacity: 1;
}
75%{
transform: scale(2.5);
opacity: 0.5;
}
100%{
transform: scale(3);
opacity: 0;
}
}
</style>
</head>
<body>
<!--h5音频控件图片不断放大，循环播放-->
<div id="box">
<img src="hua2.png" alt="" />
<img src="hua2.png" alt="" />
<img src="hua2.png" alt="" />
<img src="pic.png" alt="" />
</div>
<!--<audio src="./sss.mp3" type="audio/mpeg">1212121</audio>-->
<embed src="sss.mp3" width="0px" height="0px" type="audio/mpeg" loop="true" autostart="true">
</body>
</html>
