这个 HTML 页面包含了一个背景、多个下落的蛋糕图片和一个左右移动的loopy图片,实现了一个小熊吃蛋糕的效果
演示效果
HTML&CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ideal life</title>
<style type="text/css">
#back {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(white, pink, #ffaaff, #ffaaff, pink);
}
.cake {
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
transform-style: preserve-3d;
animation: fall 2s linear infinite;
z-index: 99;
}
@keyframes fall {
0% {
top: -60px;
transform: rotate(0deg);
}
100% {
top: calc(100vh - 100px);
transform: rotate(360deg);
}
}
#loopy {
position: absolute;
bottom: 0;
width: 200px;
height: 200px;
animation: move 10s linear infinite;
/* 假设动画周期为10秒 */
border-radius: 50%;
}
@keyframes move {
0% {
left: 0;
}
50% {
left: calc(100% - 200px);
/* 图片宽度为200px */
}
100% {
left: 0;
}
}
</style>
</head>
<body>
<div id="back"></div>
<div class="cake-container"></div>
<img src="img/loopy.jpg" id="loopy">
<script>
// 随机生成蛋糕图片的位置和下落时间
function createCakes() {
const container = document.querySelector('.cake-container');
for (let i = 0; i < 10; i++) { // 假设生成10个蛋糕
const cake = document.createElement('img');
cake.src = 'img/cake.jpg';
cake.className = 'cake';
cake.style.left = Math.random() * (window.innerWidth - 100) + 'px'; // 随机生成水平位置
cake.style.animationDuration = Math.random() * 3 + 2 + 's'; // 随机生成下落时间
cake.style.animationDelay = Math.random() * 2 + 's'; // 随机生成下落延迟
container.appendChild(cake);
}
}
// 调用函数生成蛋糕
window.onload = createCakes;
</script>
</body>
</html>
- #back：定义了一个全屏的背景层，使用固定定位，背景颜色从白色渐变到粉色，再到紫色，再回到粉色。
- .cake：定义了蛋糕图片的样式，宽度和高度都是80px，边框半径为50%使其成为圆形，绝对定位，3D变换，并且应用了一个名为fall的动画。
- @keyframes fall：定义了fall动画的关键帧，从顶部外60px的位置开始，旋转0度，到视口高度减去100px的位置结束，旋转360度。
- #loopy：定义了loopy图片的样式，绝对定位在底部，宽度200px，高度200px，并应用了一个名为move的动画。
- @keyframes move：定义了move动画的关键帧，从左边界开始，到右边界结束（减去图片宽度），然后返回到左边界。
- createCakes函数：在页面加载时执行，创建10个蛋糕图片元素，设置它们的源文件、类名、随机水平位置、随机动画持续时间和随机动画延迟，然后将它们添加到蛋糕容器中。
- window.onload = createCakes;：当页面加载完成时，调用createCakes函数。
