wordpress 网站锁,公司网站建设任务书,网站app免费制作软件,推广引流最快的方法HTML5白云飘飘动态效果教程 这里写目录标题 HTML5白云飘飘动态效果教程效果介绍实现步骤步骤一#xff1a;创建HTML结构步骤二#xff1a;设计CSS样式步骤三#xff1a;添加JavaScript交互 代码解析HTML结构解析CSS样式解析JavaScript功能解析 自定义调整总结 效果介绍
本教…HTML5白云飘飘动态效果教程 这里写目录标题 HTML5白云飘飘动态效果教程效果介绍实现步骤步骤一创建HTML结构步骤二设计CSS样式步骤三添加JavaScript交互 代码解析HTML结构解析CSS样式解析JavaScript功能解析 自定义调整总结 效果介绍
本教程将教你如何使用纯HTML5、CSS3和JavaScript创建一个优美的白云飘飘动态效果。最终效果包括
多朵白云从左向右飘动云朵大小、位置、速度和透明度各不相同动态生成随机云朵鼠标互动效果移动鼠标时云朵会轻微跟随
实现步骤
步骤一创建HTML结构
首先我们需要创建基本的HTML结构
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title白云飘飘动态效果/titlelink relstylesheet hrefstyle.css
/head
bodydiv classskydiv classcloud cloud1/divdiv classcloud cloud2/divdiv classcloud cloud3/divdiv classcloud cloud4/divdiv classcloud cloud5/div/divscript srcscript.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.9cloud.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-1const 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 classsky 作为整个场景的容器内部包含5个基础云朵每个云朵都有独特的类名cloud1-cloud5
CSS样式解析 云朵造型 使用圆角矩形作为云朵的主体通过:before和:after伪元素添加两个圆形形成完整的云朵形状使用filter: drop-shadow添加轻微阴影增强立体感 动画效果 使用keyframes moveCloud定义云朵从左到右的移动轨迹每个云朵设置不同的动画持续时间和延迟使移动看起来更自然不同云朵设置不同的透明度模拟远近感
JavaScript功能解析 动态生成云朵 createClouds()函数随机生成额外的云朵每个云朵的大小、位置、透明度、速度和延迟都是随机的这使得整个场景更加丰富和自然 鼠标交互 监听mousemove事件获取鼠标位置根据鼠标位置计算云朵的轻微位移使用transform: translate()应用位移效果
自定义调整
你可以根据需要调整以下参数来改变效果 背景颜色 body {background: linear-gradient(to bottom, #新颜色1, #新颜色2);
}云朵数量 const extraClouds 20; // 增加或减少云朵数量云朵速度 .cloud1 {animation: moveCloud 20s linear infinite; // 减小数值加快速度
}鼠标互动灵敏度 const moveX (mouseX - 0.5) * 20; // 增大数值增强互动效果
const moveY (mouseY - 0.5) * 10;总结
通过这个教程你学会了如何使用HTML5、CSS3和JavaScript创建一个白云飘飘的动态效果。这个效果可以应用于各种网页场景如
网站背景登录页面天气相关应用儿童教育网站休闲游戏背景
希望这个教程对你有所帮助你可以根据自己的需求进一步扩展和优化这个效果。
