200行Html5+CSS3+JS代码实现动态圣诞树

3 years ago

source link: https://blog.csdn.net/qq_53673551/article/details/122028026
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

最近CSDN的热榜出现了很多用Python、C/C++等编程语言实现的圣诞树，发现很少用前端的，这篇文章用前端三大杀手Html5、CSS、Js来实现动态圣诞树。

二、圣诞树

效果展示：

备注：

整体圣诞树分为3个部分，书的主干、粒子特效、树上的卡片
树上的卡片(重点)：每一张卡片上都有一个名字，代表圣诞树的叶子，后面可以根据自己需求更改，比如全部改成喜欢人的名字，在JS代码的第五行内更改内容
树的动态旋转通过js实现、主干是html5、样式CSS

三、编码实现

CSS代码：

Html代码：

JS代码：

const greetings = [ '知心宝贝','知心宝贝','Merry Christmas','Merry Christmas','Merry Christmas','Merry Christmas','知心宝贝','12月25','知心宝贝','Merry Christmas','Happy Holidays', ' 知心宝贝','12月25','知心宝贝','Merry Christmas','知心宝贝','Merry Christmas','知心宝贝' ];

附录：

零基础必看的Html5+Css3+移动端前端教程（一）

零基础必看的Html5+Css3+移动端前端教程(二)

零基础必看的Html5+Css3+移动端前端教程(三)

零基础必看的Html5+Css3+移动端前端教程(四)

零基础必看的Html5+Css3+移动端前端教程(五)

Recommend