前言：
一年一度圣诞节强势来袭，通过HTML实现精美圣诞树！
效果展示：
实现步骤：
设置背景图
设置渐变色边框
给字体设置一秒颜色转换一次
给字体设置一秒位置改变一次
引入歌曲
点击屏幕歌曲开始播放
歌曲所在链接：https://www.kugou.com/mixsong/onyvv52.html?fromsearch=%E5%9C%A3%E8%AF%9E%E8%8A%82%E6%AD%8C%E6%9B%B2
背景图所在链接：https://img.zcool.cn/community/01b3ba554bf0fe000001bf72e66eaf.jpg@1280w_1l_2o_100sh.jpg
编码实现：
<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"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width: 100%; height: 100%; } .sheng{ width: 800px; height: 100%; margin: 0 auto; background: url(sds.jpg) center no-repeat; background-size: 100%; border: 10px solid; border-image: radial-gradient(yellow,#ff00ad,#0adfee) 1; } .title{ width: 300px; color: red; font-size: 60px; text-align: center; position: relative; top: 0; left: 30%; } .audio{ display: none; } </style> </head> <body> <div class="box"> <div class="sheng"> <audio src="圣诞节歌曲.mp3" loop="loop" controls="controls" class="audio"></audio> <h1 class="title">圣诞节快乐</h1> </div> </div> </body> <script> var title = document.getElementsByClassName('title')[0] var box = document.getElementsByClassName('box')[0] var audio = document.getElementsByClassName('audio')[0] box.onclick=()=>{ audio.play() } setInterval(() => { var Number = "#" + // 下舍入（0-1随机数 乘以 255）转换为16进制 Math.floor(Math.random() * 255).toString(16) + Math.floor(Math.random() * 255).toString(16) + Math.floor(Math.random() * 255).toString(16); title.style.color = Number var i=Math.round(Math.random()*500) var j=Math.round(Math.random()*840) title.style.top=j+'px' title.style.left=i+'px' }, 1000) </script> </html>
祝大家圣诞快乐
