外链论坛

 找回密码
 立即注册
搜索
查看: 114|回复: 5

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

[复制链接]

3025

主题

210

回帖

9777万

积分

论坛元老

Rank: 8Rank: 8

积分
97779028
发表于 2024-6-29 13:40:36 | 显示全部楼层 |阅读模式

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




上一篇:HTML期末学生大作业-在线电影网站html+css+javascript
下一篇:个人网盘2T资料整理分享,有学习类书籍、PHP视频教程、HTML+JS+CSS视频教程等
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-28 16:40:56 | 显示全部楼层
外链发布社区 http://www.fok120.com/
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-7 13:00:55 | 显示全部楼层
“BS”(鄙视的缩写)‌
回复

使用道具 举报

2983

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569178
发表于 2024-10-7 09:47:17 | 显示全部楼层
我完全赞同你的观点,思考很有深度。
回复

使用道具 举报

3131

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968648
发表于 2024-10-10 19:38:33 | 显示全部楼层
我深受你的启发,你的话语是我前进的动力。
回复

使用道具 举报

3131

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968648
发表于 昨天 21:51 | 显示全部楼层
认真阅读了楼主的帖子,非常有益。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-22 05:27 , Processed in 0.111788 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.