備案 手機(jī)網(wǎng)站銷(xiāo)售管理怎么帶團(tuán)隊(duì)
HTML5白云飄飄動(dòng)態(tài)效果教程
這里寫(xiě)目錄標(biāo)題
- HTML5白云飄飄動(dòng)態(tài)效果教程
- 效果介紹
- 實(shí)現(xiàn)步驟
- 步驟一：創(chuàng)建HTML結(jié)構(gòu)
- 步驟二：設(shè)計(jì)CSS樣式
- 步驟三：添加JavaScript交互
- 代碼解析
- HTML結(jié)構(gòu)解析
- CSS樣式解析
- JavaScript功能解析
- 自定義調(diào)整
- 總結(jié)
效果介紹
本教程將教你如何使用純HTML5、CSS3和JavaScript創(chuàng)建一個(gè)優(yōu)美的白云飄飄動(dòng)態(tài)效果。最終效果包括：
- 多朵白云從左向右飄動(dòng)
- 云朵大小、位置、速度和透明度各不相同
- 動(dòng)態(tài)生成隨機(jī)云朵
- 鼠標(biāo)互動(dòng)效果（移動(dòng)鼠標(biāo)時(shí)云朵會(huì)輕微跟隨）
實(shí)現(xiàn)步驟
步驟一：創(chuàng)建HTML結(jié)構(gòu)
首先，我們需要?jiǎng)?chuàng)建基本的HTML結(jié)構(gòu)：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>白云飄飄動(dòng)態(tài)效果</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>
這里我們創(chuàng)建了一個(gè)名為sky的容器，內(nèi)部放置了5個(gè)基礎(chǔ)云朵元素。
步驟二：設(shè)計(jì)CSS樣式
接下來(lái)，創(chuàng)建style.css文件，設(shè)計(jì)云朵的樣式和動(dòng)畫(huà)效果：
* {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));
}/* 使用偽元素創(chuàng)建云朵的圓形部分 */
.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;
}/* 各個(gè)云朵的特定樣式 */
.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;
}/* 定義云朵移動(dòng)動(dòng)畫(huà) */
@keyframes moveCloud {from {left: -300px;}to {left: 100%;}
}
步驟三：添加JavaScript交互
最后，創(chuàng)建script.js文件，添加動(dòng)態(tài)效果和交互功能：
document.addEventListener('DOMContentLoaded', function() {const sky = document.querySelector('.sky');// 隨機(jī)創(chuàng)建更多云朵function createClouds() {const extraClouds = 10; // 額外創(chuàng)建的云朵數(shù)量for (let i = 0; i < extraClouds; i++) {const cloud = document.createElement('div');cloud.classList.add('cloud');// 隨機(jī)大小const size = Math.random() * 100 + 80;cloud.style.width = `${size}px`;cloud.style.height = `${size / 3}px`;// 隨機(jī)位置const top = Math.random() * 90; // 0-90% 的高度cloud.style.top = `${top}%`;// 隨機(jī)透明度const opacity = Math.random() * 0.4 + 0.5; // 0.5-0.9cloud.style.opacity = opacity;// 隨機(jī)速度const duration = Math.random() * 30 + 30; // 30-60秒cloud.style.animation = `moveCloud ${duration}s linear infinite`;// 隨機(jī)延遲const delay = Math.random() * 30;cloud.style.animationDelay = `${delay}s`;// 隨機(jī)初始位置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);}}// 當(dāng)頁(yè)面加載完成后創(chuàng)建云朵createClouds();// 對(duì)云朵添加鼠標(biāo)互動(dòng)效果document.addEventListener('mousemove', function(e) {// 計(jì)算鼠標(biāo)在頁(yè)面上的相對(duì)位置（0-1）const mouseX = e.clientX / window.innerWidth;const mouseY = e.clientY / window.innerHeight;// 獲取所有云朵const clouds = document.querySelectorAll('.cloud');// 為每個(gè)云朵添加輕微移動(dòng)效果clouds.forEach(cloud => {const moveX = (mouseX - 0.5) * 10; // -5 到 5 像素的水平移動(dòng)const moveY = (mouseY - 0.5) * 5; // -2.5 到 2.5 像素的垂直移動(dòng)// 應(yīng)用變換cloud.style.transform = `translate(${moveX}px, ${moveY}px)`;});});
});
代碼解析
HTML結(jié)構(gòu)解析
<div class="sky">作為整個(gè)場(chǎng)景的容器- 內(nèi)部包含5個(gè)基礎(chǔ)云朵，每個(gè)云朵都有獨(dú)特的類(lèi)名（cloud1-cloud5）
CSS樣式解析
-
云朵造型：
- 使用圓角矩形作為云朵的主體
- 通過(guò)
:before和:after偽元素添加兩個(gè)圓形，形成完整的云朵形狀 - 使用
filter: drop-shadow添加輕微陰影，增強(qiáng)立體感
-
動(dòng)畫(huà)效果：
- 使用
@keyframes moveCloud定義云朵從左到右的移動(dòng)軌跡 - 每個(gè)云朵設(shè)置不同的動(dòng)畫(huà)持續(xù)時(shí)間和延遲，使移動(dòng)看起來(lái)更自然
- 不同云朵設(shè)置不同的透明度，模擬遠(yuǎn)近感
- 使用
JavaScript功能解析
-
動(dòng)態(tài)生成云朵：
createClouds()函數(shù)隨機(jī)生成額外的云朵- 每個(gè)云朵的大小、位置、透明度、速度和延遲都是隨機(jī)的
- 這使得整個(gè)場(chǎng)景更加豐富和自然
-
鼠標(biāo)交互：
- 監(jiān)聽(tīng)
mousemove事件，獲取鼠標(biāo)位置 - 根據(jù)鼠標(biāo)位置計(jì)算云朵的輕微位移
- 使用
transform: translate()應(yīng)用位移效果
- 監(jiān)聽(tīng)
自定義調(diào)整
你可以根據(jù)需要調(diào)整以下參數(shù)來(lái)改變效果：
-
背景顏色：
body {background: linear-gradient(to bottom, #新顏色1, #新顏色2); } -
云朵數(shù)量：
const extraClouds = 20; // 增加或減少云朵數(shù)量 -
云朵速度：
.cloud1 {animation: moveCloud 20s linear infinite; // 減小數(shù)值加快速度 } -
鼠標(biāo)互動(dòng)靈敏度：
const moveX = (mouseX - 0.5) * 20; // 增大數(shù)值增強(qiáng)互動(dòng)效果 const moveY = (mouseY - 0.5) * 10;
總結(jié)
通過(guò)這個(gè)教程，你學(xué)會(huì)了如何使用HTML5、CSS3和JavaScript創(chuàng)建一個(gè)白云飄飄的動(dòng)態(tài)效果。這個(gè)效果可以應(yīng)用于各種網(wǎng)頁(yè)場(chǎng)景，如：
- 網(wǎng)站背景
- 登錄頁(yè)面
- 天氣相關(guān)應(yīng)用
- 兒童教育網(wǎng)站
- 休閑游戲背景
希望這個(gè)教程對(duì)你有所幫助！你可以根據(jù)自己的需求進(jìn)一步擴(kuò)展和優(yōu)化這個(gè)效果。