从模糊到现实 浮现
<!DOCTYPE html>
<html>
<head>
<style>
.body {
background-color:#f8f8f8;
}
/* 定义动画效果 */
@keyframes openingAnimation {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* 设置动画元素样式 */
.animation {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: openingAnimation 3s ease-in-out;
}
/* 设置网页内容样式 */
/* 设置背景样式 */
.background
width: 100%;
height: 900vh;
}
</style>
</head>
<body>
<div class="background">
<div class="animation">
<img src="tupian/y.png" width="370px"/>
<p>在滑动一次退出</p>
</div>
</div>
<script>
// 动画播放完毕后打开网址
setTimeout(function() {
window.location.href = "index.html";
}, 2000);
</script>
<body style="background-color: #f8f8f8;">
<!-- 网页内容 -->
</body>
</html>