HTML实现动态圣诞树和雪花效果
生活随笔
收集整理的這篇文章主要介紹了
HTML实现动态圣诞树和雪花效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
圣誕樹(shù)是通過(guò)一個(gè)圣誕樹(shù)圖標(biāo)設(shè)置為3D進(jìn)行旋轉(zhuǎn)，涉及HTML、CSS、JavaScript知識(shí)點(diǎn)
雪花背景是利用HTML的新特性canvas編寫(xiě)；
源代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><linkhref="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css"rel="stylesheet"/><title>Document</title><style>* {margin: 0;padding: 0;}body {background: #333;display: flex;width: 100%;height: 100vh;justify-content: center;align-items: center;}.main {width: 200px;height: 200px;position: absolute;display: flex;justify-content: center;align-items: center;animation: roll 5s linear infinite;transform-style: preserve-3d;transform: rotateX(-15deg);}.main i {font-size: 100px;/* 樹(shù)泛光的顏色 */text-shadow: 0 0 10px white, 0 0 20px rgb(50, 50, 156);position: absolute;/* 樹(shù)的顏色 */color: green;}/* 每片樹(shù)葉開(kāi)始旋轉(zhuǎn)的位置 */.main i:nth-child(2) {transform: rotateY(90deg);}.main i:nth-child(3) {transform: rotateY(45deg);}.main i:nth-child(4) {transform: rotateY(-45deg);}@keyframes roll {100% {transform: rotateX(-15deg) rotateY(360deg);}}.main div {position: absolute;width: 100%;height: 100%;border: 2px solid black;}* {margin: 0;padding: 0;}html {overflow: hidden;}body {background-size: cover;}h1 {color: #0097e6;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-size: 40px;cursor: default;}canvas {filter: blur(1px);}</style></head><body><!-- 雪花背景畫(huà)布 --><canvas id="canvas"></canvas><!-- 圣誕樹(shù)圖標(biāo) --><div class="main"><i class="fas fa-tree"></i><i class="fas fa-tree"></i><i class="fas fa-tree"></i><i class="fas fa-tree"></i></div></body><script type="text/javascript">var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");var w = window.innerWidth;var h = window.innerHeight;canvas.width = w;canvas.height = h;//設(shè)置雪片數(shù)量var num = 200;//定義雪花數(shù)組var snows = [];for (var i = 0; i < num; i++) {//向數(shù)組填充元素，元素屬性有坐標(biāo)及半徑，均為隨機(jī)生成，其中半徑上限為3snows.push({x: Math.random() * w,y: Math.random() * h,r: Math.random() * 3,});}//繪制圖片function draw() {context.clearRect(0, 0, w, h); //清空畫(huà)布context.beginPath(); //畫(huà)筆開(kāi)始for (var i = 0; i < num; i++) {var snow = snows[i];context.fillStyle = "rgba(255,255,255,0.4)"; //設(shè)定填充方式為白色半透明context.moveTo(snow.x, snow.y); //畫(huà)筆移動(dòng)到指定坐標(biāo)處context.arc(snow.x, snow.y, snow.r, 0, Math.PI * 2); //根據(jù)屬性繪制圓形}context.fill(); //填充路徑//雪片落下move();}function move() {for (var i = 0; i < num; i++) {var snow = snows[i];snow.y += (7 - snow.r) / 10; //根據(jù)雪片大小調(diào)整落下速度if (snow.y > h) {//如果雪片超出畫(huà)布范圍，則在頂端重繪snows[i] = { x: Math.random() * w, y: 0, r: snow.r };}}}//執(zhí)行和調(diào)用函數(shù)draw();setInterval(draw, 1); //每隔一毫秒重繪一次</script> </html>參考學(xué)習(xí)教程：b站一個(gè)叫? ?flashaxe 的up主
總結(jié)
以上是生活随笔為你收集整理的HTML实现动态圣诞树和雪花效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 端口号是什么以及常见端口号
- 下一篇： HTML圣诞树代码(动态音效)