当前位置：首页 > article >正文

HTMLCSS 奇幻森林：小熊的甜蜜蛋糕派对大冒险

article 2024/12/4 21:00:13

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

查看全文

http://www.kler.cn/a/421766.html