这个 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函数。
