html+css制作圣诞树

最新推荐文章于 2024-05-09 01:42:42 发布
最新推荐文章于 2024-05-09 01:42:42 发布
阅读量1.9w 收藏 242
点赞数 18
分类专栏： 笔记 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55887872/article/details/122139698
版权

圣诞节到来，看到网上多种多样的圣诞树，作为程序员也想用代码制作一棵圣诞树出来，于是用html+css做了一个圣诞树的网页送给朋友

  • html代码
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="author" content="巴打的圣诞树">
		<title>html+css制作圣诞树</title>
		<link rel="stylesheet" href="css/sd.css"/>
	</head>
	<body>
		<p class="word">Merry Christmas</p>
		<div class="tree">
			<div class=star>
				<div class="star-in"></div>
			</div>
			<!--树叶-->
			<div class="leaf-box">
				<div class="leaf">
					<div class="edge"></div>
					<div class="edge right"></div>
				</div>
				<div class="leaf">
					<div class="edge"></div>
					<div class="edge right"></div>
				</div>
				<div class="leaf">
					<div class="edge"></div>
					<div class="edge right"></div>
				</div>
				<div class="leaf">
					<div class="edge"></div>
					<div class="edge right"></div>
				</div>
				<div class="leaf">
					<div class="edge"></div>
					<div class="edge right"></div>
				</div>
			</div>
			<!--树干-->
			<div class="trunk"></div>
			<!--彩色的球-->
			<div class="ball-box">
				<div class="ball b1"></div>
				<div class="ball b2"></div>
				<div class="ball b3"></div>
				<div class="ball b4"></div>
				<div class="ball b5"></div>
				<div class="ball b6"></div>
				<div class="ball b7"></div>
				<div class="ball b8"></div>
				<div class="ball b9"></div>
			</div>
			<!--闪烁-->
			<div class="sparkle">
				<span>✦</span>
				<span>✦</span>
				<span>✦</span>
				<span>✦</span>
				<span>✦</span>
				<span>✦</span>
			</div>
			<div class="blink">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</body>
</html>
  • CSS样式
 html,body{
	width:100%;
	height:100%;
}
*{
	margin:0;
	padding:0;
}
body{
	background-color:#000000;
}
.word{
	font-size:60px;
	text-align:center;
	color:gold;
	padding-top:70px;
	letter-spacing:5px;
	text-shadow:2px 4px 9px rgba(255, 255, 255, 0.7);
}
/*圣诞树外层div*/
.tree{
	width:200px;
	height:300px;
	margin:110px auto 0 auto;
	position: relative;
	/*相对定位*/
	/*border:1px solid #fff;*/
}
.star{
	width:10px;
	height:10px;
	position:absolute;
	/*background-color:#fff;*/
	border-radius: 50%;
	top:0px;
	z-index: 1000;
	left:50%;
	transform:translateX(-50%);
	box-shadow: 0 0 70px 30px rgb(253, 253, 253);
}
.star-in{
	position:absolute;
	left:35%;
	top:70%;
	border-right:200px solid transparent;
	border-bottom: 150px solid gold;
	border-left:200px solid transparent;
	transform:translateX(-50%) translateY(-50%) rotate(35deg) scale(0.14);
}
.star-in::before{
	border-bottom:140px solid gold;
	border-left:65px solid transparent;
	border-right:65px solid transparent;
	position:absolute;
	top:-90px;
	left:-140px;
	content:'';
	transform:rotate(-35deg);
}
.star-in::after{
	border-bottom:140px solid gold;
	border-left:210px solid transparent;
	border-right:200px solid transparent;
	position:absolute;
	top:3px;
	left:-200px;
	content:'';
	transform:rotate(-70deg);
}
.leaf{
	position:absolute;
	left:50%;
	top:3%;
	margin-left:-30px;
	background-color:rgba(14,110,14);
	width:60px;
	height:60px;
	border-radius:0 10px 35px 10px;
	transform:rotate(45deg);
	box-shadow: 2px 7px 2px rgba(43,43,43,0.2);
}
.edge{
	position:absolute;
	left:0;
	bottom: 0;
	background:rgba(14,110,14);
	width:25px;
	height:30px;
	border-radius:0 10px 35px 10px;
	transform:translateY(50%) translateX(0);
}
.edge.right{
	position:absolute;
	left:unset;
	bottom:unset;
	top:0;
	right:0;
	background:rgba(14,110,14);
	width:25px;
	height:30px;
	border-radius:0 10px 35px 10px;
	transform:translateY(0) translateX(50%);
}
/*双数修改背景色*/
.leaf:nth-child(eve){
	background-color: #0f880f;
}
.leaf:nth-child(eve).edge{
	background-color: #0f880f;
}
/*最上面*/
.leaf:nth-child(1){
	z-index: 100;
	transform: rotate(45deg) scale(0.8);
}
/*第二*/
.leaf:nth-child(2){
	z-index: 99;
	top:15%;
	transform: rotate(45deg) scale(1.3);
}
.leaf:nth-child(3){
	z-index: 98;
	top:28%;
	transform:rotate(45deg) scale(1.6);
}
.leaf:nth-child(4){
	z-index: 97;
	top:41%;
	transform:rotate(45deg) scale(1.9);
}
.leaf:nth-child(5){
	z-index: 96;
	top:54%;
	transform:rotate(45deg) scale(2.2);
}
.trunk{
	width:25px;
	height:45px;
	border-radius:0 0 3px 3px;
	position:absolute;
	left:50%;
	transform:translate(-50%);
	bottom:20px;
	z-index: 1;
	box-shadow: 0 0 80px 5px rgb(253, 253, 253);
	background:linear-gradient(0deg,#6d411b 0%,#5a341d 64%);
}
.ball{
	width:20px;
	height:20px;
	background:#f00;
	box-shadow: -1px -1px 6px inset #600,1px 1px 8px inset #ffc9c9;
	border-radius: 50%;
	z-index:101;
	position:absolute;
}
.b1{
	left:25%;
	top:30%;
}
.b2{
	left:35%;
	top:50%;
}
.b3{
	left:65%;
	top:20%;
}
.b4{
	left:45%;
	top:22%;
}
.b5{
	left:40%;
	top:72%;
}
.b6{
	left:60%;
	top:52%;
}
.b7{
	left:50%;
	top:62%;
}
.b8{
	left:80%;
	top:42%;
}
.b9{
	left:10%;
	top:62%;
}
.b4,.b5,.b6{
	background:#ececec;
	box-shadow: -1px -1px 6px inset #615f5f,1px 1px 8px inset #fff;
}
.b7,.b8,.b9{
	background:gold;
	box-shadow: -1px -1px 6px inset #3a3101,1px 1px 8px inset #fff;
}
.sparkle span{
	display:block;
	position:absolute;
	font-size: 20px;
	z-index: 101;
	color:#fff;
	animation: sparkle 1.5s ease infinite alternatel;
}
/*闪烁动画*/
@keyframes sparkle{
	0%,100%{
		transform: scale(1);
	}
	50%{
		transform: scale(1.5);
	}
}
.sparkle span:nth-child(1){
	left:30%;
	top:40%;
}
.sparkle span:nth-child(2){
	left:40%;
	top:27%;
	font-size: 15px;
}
.sparkle span:nth-child(3){
	left:50%;
	top:57%;
	font-size: 12px;
}
.sparkle span:nth-child(4){
	left:70%;
	top:67%;
	font-size: 14px;
}
.sparkle span:nth-child(5){
	left:54%;
	top:20%;
	font-size: 20px;
}
.sparkle span:nth-child(6){
	left:60%;
	top:33%;
	font-size: 20px;
}
.blink div{
	width:3px;
	height:3px;
	background: #fff;
	z-index: 101;
	position:absolute;
	border-radius: 50%;
	animation:blink 1.5s ease infinite alternate;
}
.blink div:nth-child(2){
	left:34%;
	top:13%;
	transform: scale(1.2);
}
.blink div:nth-child(3){
	left:54%;
	top:43%;
	transform: scale(0.6);
}
.blink div:nth-child(4){
	left:64%;
	top:33%;
	transform: scale(1.4);
}
.blink div:nth-child(5){
	left:34%;
	top:63%;
	transform: scale(1.8);
}
.blink div:nth-child(6){
	left:14%;
	top:76%;
	transform: scale(1.5);
}
@keyframes blink{
	0%{
		box-shadow: 0 0 0 0 #fff;
	}
	25%{
		box-shadow: 0 0 1px 1px #fff;
	}
	50%{
		box-shadow: 0 0 2px 2px #fff;
	}
	75%{
		box-shadow: 0 0 3px 3px #fff;
	}
	100%{
		box-shadow: 0 0 4px 4px #fff;
	}
}
  • 效果图
    在这里插入图片描述
阿_巴打
关注
  • 18
    点赞
  • 踩
  • 242
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
运用html+css+js三件套实现动态圣诞树
12-21
运用html+css+js三件套实现动态圣诞树
圣诞树源码-纯CSS制作螺旋圣诞树动画源码下载
12-16
综上所述，通过学习和分析这个纯CSS制作的螺旋圣诞树动画源码，你可以掌握CSS3中的动画和过渡技术，以及如何结合HTML元素和CSS选择器来创建动态视觉效果。实践这个项目，不仅可以提升你的CSS技能，还能为你带来一份...
圣诞节制作一颗HTML的圣诞树吧
快乐学习
12-31 1万+
来到圣诞节了，那么就可以制作一颗HTML的圣诞树送给朋友，没有编程基础的小白也可以按照步骤操作也可以运行起来代码的。运行这里启动调试，选择任意的浏览器运行（我有chrome就选择谷歌chrome运行了）选择快捷键Ctrl+S保存（前面的名字可以随便改，但是后缀的html不要改）保存类型就选择所有文件就好，或者有html类型的就选择html类型就好了。复制进去后点击文件----另存为。双击打开就可以查看运行效果了。然后把如下的代码复制到里面去。这样就是保存完成后的效果图了。二、记事本txt保存运行。
html制作圣诞树
热门推荐
weixin_47800450的博客
12-25 6万+
HTML代码 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - A Pen by 结弦</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial
Web前端最全精选10个圣诞树效果，这个圣诞更有技术范_圣诞树 前端，高效web开发
最新发布
2401_84616191的博客
05-09 695
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总。
用HTML写一个关于圣诞那些事的简单网页
a51144的博客
12-14 1485
网页的内容应包含圣诞节的由来，圣诞老人的由来以及圣诞树的由来。当用户点击这三个标题时，就应跳转到相应的内容的那一段，当用户点击回到顶部时，应跳转到大标题《关于圣诞那些事》。同时还应该介绍一下圣诞老人（新建一个窗口）。所以此程序应当建立两个html文件：christmas.html和shengdanlaoren.html。同时还应包含一个名为images的文件夹来存放相应的照片。初学html，很多地方多多少少有些不足，望指正！用html做一个关于圣诞那些事的简单网页。
HTML制作圣诞树，小白都会使用的教程。
qq_62994974的博客
12-24 1万+
小白都会使用的圣诞树代码。
HTML圣诞树代码
m0_61320068的博客
06-08 499
将代码复制到记事本，把后缀名改为html，双击打开就可以看见一棵圣诞树啦。
HTML圣诞树.zip
12-25
这个项目可能是一个交互式的或视觉上吸引人的HTML圣诞树，它展示了HTML、CSS（样式表语言）以及可能的JavaScript（脚本语言）在创建动态和富有创意的网页内容时的潜力。 描述中的“圣诞树”提示我们，这个HTML文件...
html画圣诞树合集.rar
12-24
HTML圣诞树的制作通常基于HTML的文本和样式属性，例如`<pre>`、`<code>`标签用于保留原始格式的文本，以及CSS（Cascading Style Sheets）来控制元素的样式，如颜色、大小和布局。下面我们将详细探讨如何利用这些技术...
基于html+css+js实现的2023年圣诞节贺卡源代码
12-15
例如，可以使用CSS3的`transform`和`transition`属性来创建卡片翻转、闪烁的灯光效果，或者使用`@keyframes`规则定义复杂的动画序列，让雪花飘落或者圣诞树上的灯泡闪烁。 JavaScript则是这个贺卡的交互性来源。它...
HTML5网红圣诞树源代码（动态音效）- 本地
12-06
抖音网红H5代码圣诞树 带动态音效（音乐律动） 因为之前是云端加载，很慢 我把用到的相关文件都放在文件夹里了 觉得自己的服务器流量够用可以使用本地加载
程序员过圣诞 | 用HTML写出绽放的烟花
亮点菌
12-25 2万+
2022年圣诞节到来啦，圣诞节是基督教纪念耶稣诞生的重要节日。亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。耶稣诞生的日期，《圣经》并无记载。公元336年罗马教会开始在12月25日过此节。12月25日原是罗马帝国规定的太阳神诞辰。有人认为选择这天庆祝圣诞，是因为基督教徒认为耶稣就是正义、永恒的太阳。5世纪中叶以后，圣诞节作为重要节日，成了教会的传统，并在东西派教会中逐渐传开。因所用历法不同等原因，各教派会举行庆祝的具体日期和活动形式也有差别。
html如何制作圣诞树,怎么用css画圣诞树？
weixin_39562340的博客
06-15 9844
html与css学习过程中会遇到各种各样的问题，当然也有很多有趣的实战应用，今天与大家分享如何用css来控制div画三角形，进一步画出圣诞树。画圣诞树，我们首先需要会用css画三角形，(相关推荐：如何用css3画三角形)。学会了画三角形，我们就可以开始画圣诞树了。用css画圣诞树的步骤：(1)画两个三角形，先画出两个大小不同三角形。#tri1{width: 0px;height: 0px;bord...
圣诞节用html实现一颗动态圣诞树（有飘雪花功能）
RookiChen的博客
12-23 4万+
可以自由选择音乐，并且圣诞树的亮度会随着音乐声音的大小而改变，第一张图片的字体是可以修改的，学过一点html的兄弟应该都知道，还有雪花飘落的动态效果，源码我放到网盘里了，需要的自取。
【小5聊】使用js+css+div布局方式画一棵圣诞树，带闪烁霓虹灯效果
小5聊的博客
12-14 439
虽然jQuery时代已经逐渐退出历史舞台，在拥抱vue的同时，也还是可以用jQuery锻炼下编程思维，毕竟比较灵活。
html5 3D圣诞树源码
weixin_30747253的博客
08-27 1万+
1. [代码][HTML]代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html> <head> <title>圣诞节圣诞树</title> <me...
圣诞树css样式表
weixin_45807622的博客
09-30 1504
创建tree.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/domtree.css"/> </head> <body> <div class="tree">
用html和css画圣诞树,用CSS画三角形，圣诞树
weixin_42493313的博客
06-25 828
#main1{width: 1000px;height: 500px;background-color: gray;}#triangle{width: 200px;height: 200px;border-top: 100px solid red;border-right: 100px solid blue;border-bottom: 100px solid green;border-left:...
帮我用html5+css3写一个圣诞树落雪的动画网页
04-01
好的，我来帮你写一个用 HTML5 和 CSS3 实现的圣诞树落雪动画网页。 首先，我们可以先用 HTML5 写一个网页的基本结构，其中包含...这样，我们就制作出了一个用 HTML5 和 CSS3 实现的圣诞树落雪动画网页。希望这些内容

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿_巴打

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值