|
1、前言
近期CSDN的热榜显现了非常多用Python、C/C++等编程语言实现的圣诞树，发掘很少用前端的，这篇文案用前端三大杀手Html5、CSS、Js来实现动态圣诞树。
2、圣诞树
效果展示：
备注：
整体圣诞树分为3个部分，书的主干、粒子特效、树上的卡片
树上的卡片(重点)：每一张卡片上都有一个名字，表率圣诞树的叶子，后面能够按照自己需求更改，例如所有改成爱好人的名字，在JS代码的第五行内更改内容
树的动态旋转经过js实现、主干是html5、样式CSS
3、编码实现
CSS代码：
/*********************************************
* RESET
*********************************************/
html{color:#000;bac公斤round:#222222;}
a{cursor:pointer;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
/* h1,h2,h3,h4,h5,h6{font-size:100%;} */
q:before,q:after{content:;}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-sty
| 
发表于 2024-6-29 13:40:36
