<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机美女图片</title>
<style type="text/css">
.bg {
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
animation: bg 10s infinite;
}
#bg1 {
background-image: url('https://cdn.seovx.com/?mom=302&1');
}
#bg2 {
animation-delay: 5s; /* bg2延迟5秒开始。同时bg2一开始无图片，使bg1淡入时背景为白色而不是另一张图片 */
}
@keyframes bg{
0%{transform: scale(1.5, 1.5);opacity: 0;}
20%{opacity: 1;} /* 0~2s 载入 */
30%{transform: scale(1, 1);} /* 0~3s图片缩放 */
50%{opacity: 1;} /* 5~7s 淡出 */
70%{opacity: 0;} /* 7~10s 图片隐藏。另一个背景在本背景淡出同时载入 */
100%{opacity: 0;}
}
</style>
</head>
<body>
<div id="bg2" class="bg"></div>
<div id="bg1" class="bg"></div>
</body>
<script type="text/javascript">
countImg = 1;
countTime = 0;
bg1Container = document.getElementById("bg1");
bg2Container = document.getElementById("bg2");
setInterval(function(){
// 一个轮回为10秒（2个图片，第1张0-5s，第2张5-10s），每个背景在淡出后（第7秒）更新图片
countTime += 1;
if(countTime % 10 == 7){
countImg += 1;
bg1Container.style = `background-image: url(https://cdn.seovx.com/?mom=302&${countImg})`;
}else if((countTime + 5) % 10 == 7){ // 第2张图片默认无图片，比第一张延迟5s开始动画，+5保证了在第2秒开始加载图片
countImg += 1;
bg2Container.style = `background-image: url(https://cdn.seovx.com/?mom=302&${countImg})`;
}
}, 1000);
</script>
</html>
注意：本站资源多为网络收集，如涉及版权问题请及时与站长联系，我们会在第一时间内删除资源。
您购买的只是资源，不提供解答疑问和安装服务。
本站用户发帖仅代表本站用户个人观点，并不代表本站赞同其观点和对其真实性负责。
本站资源大多存储在云盘，如发现链接失效，请及时与站长联系，我们会第一时间更新。
转载本网站任何内容，请按照转载方式正确书写本站原文地址
评论 (0)