网站更换服务器需要重新备案吗,新品发布会现场,wordpress多账号,如何用dreamer做网站一#xff0c;整体设计思路 圣诞树h5#xff08;简易#xff09; 1.页面布局与样式#xff1a;
页面使用了全屏的黑色背景#xff0c;中央显示圣诞树#xff0c;树形由三层绿色的三角形组成#xff0c;每一层的大小逐渐变小。树干是一个棕色的矩形#xff0c;位于三角…一整体设计思路 圣诞树h5简易 1.页面布局与样式
页面使用了全屏的黑色背景中央显示圣诞树树形由三层绿色的三角形组成每一层的大小逐渐变小。树干是一个棕色的矩形位于三角形的底部。
2.动态元素
装饰球通过 JavaScript 动态添加每个装饰球都是一个红色的圆形并且使用 keyframes 实现闪烁效果。装饰球的位置和颜色是随机的当用户点击装饰球时会弹出提示框。雪花通过 JavaScript 动态添加雪花雪花是白色的小圆形使用 keyframes 让雪花从屏幕顶部落下落下速度是随机的。
3.动画与交互
a.闪烁动画装饰球通过 CSS 的 keyframes 实现闪烁效果让它们看起来像闪烁的灯泡。雪花下
b.落动画雪花也使用了类似的动画使它们从屏幕上方逐渐掉落至屏幕底部。
c.随机效果装饰球的颜色、位置、雪花的数量和动画时长都是随机生成的使每次加载页面时都呈现不同的效果。
详细解释 会放在代码注释里面。
二整体代码
!DOCTYPE html
html langzhheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title圣诞树/titlestyle/* 设置页面的基本样式居中显示并设置黑色背景 */body {margin: 0;padding: 0;background-color: #000;/* 背景颜色为黑色 */color: #fff;/* 字体颜色为白色 */font-family: Arial, sans-serif;/* 设置字体 */display: flex;justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */height: 100vh;/* 高度为视口的100% */overflow: hidden;/* 防止滚动条 */}/* 树的容器样式 */.tree {position: relative;width: 0;height: 0;margin-top: -50px;/* 调整树的位置 */}/* 树叶的层样式 */.triangle {position: absolute;width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;}/* 每一层树叶的样式 */.layer1 {border-bottom: 150px solid green;/* 第一层绿色树叶 */top: 0;left: -80px;/* 居中对齐 */}.layer2 {border-bottom: 130px solid green;/* 第二层树叶 */top: 100px;left: -80px;}.layer3 {border-bottom: 110px solid green;/* 第三层树叶 */top: 180px;left: -80px;}/* 树干样式 */.trunk {position: absolute;top: 290px;/* 树干位置 */width: 40px;height: 60px;background-color: brown;/* 树干颜色 */}/* 装饰球样式 */.ornament {position: absolute;width: 20px;height: 20px;background-color: red;/* 红色装饰球 */border-radius: 50%;/* 圆形 */box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);/* 发光效果 */animation: blink 2s infinite alternate;/* 让装饰球闪烁 */}/* 定义闪烁效果 */keyframes blink {to {opacity: 0.2;/* 透明度变化 */}}/* 雪花样式 */.snowflake {position: absolute;top: -20px;/* 雪花从顶部开始 */width: 10px;height: 10px;background-color: white;/* 雪花颜色为白色 */border-radius: 50%;/* 圆形 */box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);/* 发光效果 */animation: fall linear infinite;/* 雪花下落动画 */}/* 定义雪花下落效果 */keyframes fall {100% {transform: translateY(100vh);/* 让雪花下落到视口底部 */}}/style
/headbody!-- 圣诞树容器 --div classtreediv classtriangle layer1/div !-- 第一层 --div classtriangle layer2/div !-- 第二层 --div classtriangle layer3/div !-- 第三层 --div classtrunk/div !-- 树干 --/divscript// 动态添加装饰球和雪花const tree document.querySelector(.tree);const totalOrnaments 20; // 圣诞树上的装饰球数量const totalSnowflakes 50; // 雪花的数量// 创建装饰球function createOrnaments() {for (let i 0; i totalOrnaments; i) {const ornament document.createElement(div);ornament.classList.add(ornament);ornament.style.left ${Math.random() * 180 - 80}px; // 随机位置ornament.style.top ${Math.random() * 280}px; // 随机位置ornament.style.backgroundColor getRandomColor(); // 随机颜色tree.appendChild(ornament);// 点击事件点击装饰球时弹出提示ornament.addEventListener(click, () {alert(你点击了一个装饰球);});}}// 创建雪花function createSnowflakes() {for (let i 0; i totalSnowflakes; i) {const snowflake document.createElement(div);snowflake.classList.add(snowflake);snowflake.style.left ${Math.random() * window.innerWidth}px; // 随机位置snowflake.style.animationDuration ${Math.random() * 5 3}s; // 随机动画持续时间document.body.appendChild(snowflake);}}// 获取随机颜色function getRandomColor() {const colors [#FF0000, #00FF00, #0000FF, #FFFF00, #FF00FF, #00FFFF];return colors[Math.floor(Math.random() * colors.length)];}// 初始化圣诞场景createOrnaments();createSnowflakes();/script/body/html
三详细解释
I 大树部分
bodydiv classtreediv classtriangle layer1/divdiv classtriangle layer2/divdiv classtriangle layer3/divdiv classtrunk/div/div
/body一棵大树里面有树干和树叶部分树叶部分用triangle类名并在css当中把它绘制成三角形。
.triangle {position: absolute;width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;
}layer表示层级 有三层trunk类名的div是树干。
//树干
.trunk {position: absolute;top: 290px;width: 40px;height: 60px;background-color: brown;
}II 动画效果
动态装饰球Ornaments这个是随机生成的。
function createOrnaments() {for (let i 0; i totalOrnaments; i) {const ornament document.createElement(div);ornament.classList.add(ornament);ornament.style.left ${Math.random() * 180 - 80}px;ornament.style.top ${Math.random() * 280}px;ornament.style.backgroundColor getRandomColor();tree.appendChild(ornament);ornament.addEventListener(click, () {alert(你点击了一个装饰球);});}
}装饰球闪烁效果CSS 动画
keyframes blink {to {opacity: 0.2;}
}动态雪花效果 function createSnowflakes() {for (let i 0; i totalSnowflakes; i) {const snowflake document.createElement(div);snowflake.classList.add(snowflake);snowflake.style.left ${Math.random() * window.innerWidth}px;snowflake.style.animationDuration ${Math.random() * 5 3}s;document.body.appendChild(snowflake);}
}createSnowflakes 函数生成了 50 个雪花totalSnowflakes 50。每个雪花是一个小圆形的 div 元素位置是随机的雪花的 left 值根据窗口宽度随机生成。animationDuration 设置了雪花的下落时间使每片雪花的下落速度不同。
随机颜色生成JavaScript 函数
function getRandomColor() {const colors [#FF0000, #00FF00, #0000FF, #FFFF00, #FF00FF, #00FFFF];return colors[Math.floor(Math.random() * colors.length)];
}提前祝福大家 圣诞快乐
效果 圣诞树h5简易
