HTML5海底网页特效-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147352167

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>海底世界</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(to bottom, #0077be, #002244);
overflow: hidden;
margin: 0;
padding: 0;
height: 100vh;
}

.bubble {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
animation: rise 10s infinite;
}

@keyframes rise {
from {
bottom: -100px;
transform: translateX(0);
}

to {
bottom: 100vh;
transform: translateX(100px);
}
}

.fish {
position: absolute;
width: 100px;
height: 50px;
background: url('https://www.freeiconspng.com/uploads/fish-icon-23.png');
background-size: contain;
background-repeat: no-repeat;
animation: swim 15s infinite;
}

@keyframes swim {
0% {
left: -100px;
top: 50%;
}

50% {
left: 100%;
top: 30%;
}

100% {
left: -100px;
top: 50%;
}
}

.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
font-family: 'Roboto', sans-serif;
}
</style>
</head>

<body>
<div class="bubble" style="width: 20px; height: 20px; left: 10%; animation-duration: 8s;"></div>
<div class="bubble" style="width: 30px; height: 30px; left: 25%; animation-duration: 9s;"></div>
<div class="bubble" style="width: 25px; height: 25px; left: 40%; animation-duration: 11s;"></div>
<div class="bubble" style="width: 15px; height: 15px; left: 55%; animation-duration: 7s;"></div>
<div class="bubble" style="width: 35px; height: 35px; left: 70%; animation-duration: 10s;"></div>
<div class="bubble" style="width: 22px; height: 22px; left: 85%; animation-duration: 9s;"></div>
<div class="fish" style="animation-duration: 12s;"></div>
<div class="content">
<h1 class="text-4xl font-bold mb-4">欢迎来到海底世界</h1>
<p class="text-lg mb-6">探索神秘的海底世界，感受大海的魅力。</p>

</div>
</body>

</html>