HTML5白云飘飘动态效果教程

发布于：2025-06-15 ⋅ 阅读:(14) ⋅ 点赞:(0)

HTML5白云飘飘动态效果教程

这里写目录标题

效果介绍

本教程将教你如何使用纯HTML5、CSS3和JavaScript创建一个优美的白云飘飘动态效果。最终效果包括：

  • 多朵白云从左向右飘动
  • 云朵大小、位置、速度和透明度各不相同
  • 动态生成随机云朵
  • 鼠标互动效果（移动鼠标时云朵会轻微跟随）
  • 在这里插入图片描述

实现步骤

步骤一：创建HTML结构

首先，我们需要创建基本的HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>白云飘飘动态效果</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="sky">
        <div class="cloud cloud1"></div>
        <div class="cloud cloud2"></div>
        <div class="cloud cloud3"></div>
        <div class="cloud cloud4"></div>
        <div class="cloud cloud5"></div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

这里我们创建了一个名为sky的容器，内部放置了5个基础云朵元素。

步骤二：设计CSS样式

接下来，创建style.css文件，设计云朵的样式和动画效果：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    background: linear-gradient(to bottom, #87CEEB, #E0F7FF);
    height: 100vh;
    width: 100%;
}

.sky {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 云朵基本样式 */
.cloud {
    position: absolute;
    background: white;
    border-radius: 50px;
    filter: drop-shadow(3px 5px 5px rgba(0, 0, 0, 0.1));
}

/* 使用伪元素创建云朵的圆形部分 */
.cloud:before, .cloud:after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
}

.cloud:before {
    width: 50px;
    height: 50px;
    top: -30px;
    left: 15px;
}

.cloud:after {
    width: 70px;
    height: 70px;
    top: -35px;
    right: 15px;
}

/* 各个云朵的特定样式 */
.cloud1 {
    width: 150px;
    height: 60px;
    top: 10%;
    left: -150px;
    opacity: 0.9;
    animation: moveCloud 35s linear infinite;
}

.cloud2 {
    width: 120px;
    height: 50px;
    top: 25%;
    left: -120px;
    opacity: 0.85;
    animation: moveCloud 45s linear infinite;
    animation-delay: 5s;
}

.cloud3 {
    width: 180px;
    height: 70px;
    top: 40%;
    left: -180px;
    opacity: 0.8;
    animation: moveCloud 40s linear infinite;
    animation-delay: 10s;
}

.cloud4 {
    width: 100px;
    height: 40px;
    top: 60%;
    left: -100px;
    opacity: 0.75;
    animation: moveCloud 50s linear infinite;
    animation-delay: 15s;
}

.cloud5 {
    width: 160px;
    height: 65px;
    top: 75%;
    left: -160px;
    opacity: 0.7;
    animation: moveCloud 38s linear infinite;
    animation-delay: 20s;
}

/* 定义云朵移动动画 */
@keyframes moveCloud {
    from {
        left: -300px;
    }
    to {
        left: 100%;
    }
}

步骤三：添加JavaScript交互

最后，创建script.js文件，添加动态效果和交互功能：

document.addEventListener('DOMContentLoaded', function() {
    const sky = document.querySelector('.sky');
    
    // 随机创建更多云朵
    function createClouds() {
        const extraClouds = 10; // 额外创建的云朵数量
        
        for (let i = 0; i < extraClouds; i++) {
            const cloud = document.createElement('div');
            cloud.classList.add('cloud');
            
            // 随机大小
            const size = Math.random() * 100 + 80;
            cloud.style.width = `${size}px`;
            cloud.style.height = `${size / 3}px`;
            
            // 随机位置
            const top = Math.random() * 90; // 0-90% 的高度
            cloud.style.top = `${top}%`;
            
            // 随机透明度
            const opacity = Math.random() * 0.4 + 0.5; // 0.5-0.9
            cloud.style.opacity = opacity;
            
            // 随机速度
            const duration = Math.random() * 30 + 30; // 30-60秒
            cloud.style.animation = `moveCloud ${duration}s linear infinite`;
            
            // 随机延迟
            const delay = Math.random() * 30;
            cloud.style.animationDelay = `${delay}s`;
            
            // 随机初始位置
            const startPosition = Math.random() * 100;
            cloud.style.left = `${startPosition}%`;
            
            // 添加伪元素样式
            cloud.style.position = 'absolute';
            cloud.style.background = 'white';
            cloud.style.borderRadius = '50px';
            cloud.style.filter = 'drop-shadow(3px 5px 5px rgba(0, 0, 0, 0.1))';
            
            sky.appendChild(cloud);
        }
    }
    
    // 当页面加载完成后创建云朵
    createClouds();
    
    // 对云朵添加鼠标互动效果
    document.addEventListener('mousemove', function(e) {
        // 计算鼠标在页面上的相对位置（0-1）
        const mouseX = e.clientX / window.innerWidth;
        const mouseY = e.clientY / window.innerHeight;
        
        // 获取所有云朵
        const clouds = document.querySelectorAll('.cloud');
        
        // 为每个云朵添加轻微移动效果
        clouds.forEach(cloud => {
            const moveX = (mouseX - 0.5) * 10; // -5 到 5 像素的水平移动
            const moveY = (mouseY - 0.5) * 5;  // -2.5 到 2.5 像素的垂直移动
            
            // 应用变换
            cloud.style.transform = `translate(${moveX}px, ${moveY}px)`;
        });
    });
});

代码解析

HTML结构解析

  • <div class="sky"> 作为整个场景的容器
  • 内部包含5个基础云朵，每个云朵都有独特的类名（cloud1-cloud5）

CSS样式解析

  1. 云朵造型：

    • 使用圆角矩形作为云朵的主体
    • 通过:before和:after伪元素添加两个圆形，形成完整的云朵形状
    • 使用filter: drop-shadow添加轻微阴影，增强立体感

  2. 动画效果：

    • 使用@keyframes moveCloud定义云朵从左到右的移动轨迹
    • 每个云朵设置不同的动画持续时间和延迟，使移动看起来更自然
    • 不同云朵设置不同的透明度，模拟远近感

JavaScript功能解析

  1. 动态生成云朵：

    • createClouds()函数随机生成额外的云朵
    • 每个云朵的大小、位置、透明度、速度和延迟都是随机的
    • 这使得整个场景更加丰富和自然

  2. 鼠标交互：

    • 监听mousemove事件，获取鼠标位置
    • 根据鼠标位置计算云朵的轻微位移
    • 使用transform: translate()应用位移效果

自定义调整

你可以根据需要调整以下参数来改变效果：

  1. 背景颜色：

    body {
    background: linear-gradient(to bottom, #新颜色1, #新颜色2);
}

  2. 云朵数量：

    const extraClouds = 20; // 增加或减少云朵数量

  3. 云朵速度：

    .cloud1 {
    animation: moveCloud 20s linear infinite; // 减小数值加快速度
}

  4. 鼠标互动灵敏度：

    const moveX = (mouseX - 0.5) * 20; // 增大数值增强互动效果
const moveY = (mouseY - 0.5) * 10;

总结

通过这个教程，你学会了如何使用HTML5、CSS3和JavaScript创建一个白云飘飘的动态效果。这个效果可以应用于各种网页场景，如：

  • 网站背景
  • 登录页面
  • 天气相关应用
  • 儿童教育网站
  • 休闲游戏背景

希望这个教程对你有所帮助！你可以根据自己的需求进一步扩展和优化这个效果。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布