用HTML创作圣诞节的圣诞树

最新推荐文章于 2024-10-12 11:30:07 发布

-_Ryan_-

最新推荐文章于 2024-10-12 11:30:07 发布

阅读量208

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/m0_66524548/article/details/128514602

版权

本文将教你如何利用HTML和CSS3技术创建一个精美的圣诞树，通过定义不同元素和应用样式，实现从基础形状到装饰细节的全过程，为你的网页增添节日氛围。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>正函数创作的圣诞树</title>
	<!-- <link rel="stylesheet" type="text/css" href="index.css"/> -->
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
		}
		* {
			margin: 0;
			padding: 0;
		}
		body {
			background-color: #020024;
		}
		.word {
			font-size: 22px;
			text-align: center;
			color: gold;
			padding-top: 50px;
			letter-spacing: 5px;
			text-shadow: 2px 4px 9px rgba(255, 255, 255, 0.7);
		}
		/*圣诞树外层div*/
		.tree {
			width: 200px;
			height: 300px;
			margin: 80px auto 0 auto;
			/*开启相对定位*/
			position: relative;
			/* border: 1px solid #fff; */
		}
		.star {
			width: 50px;
			height: 50px;
			position: absolute;
			background-color: #fff;
			border-radius: 50%;
			top: -25px;
			z-index: 1000;
			/*  */
			left: 50%;
			/*  */
			transform: translateX(-50%);
			animation: starLight 1.5s ease infinite alternate;
		}
		.star-in {
			position: absolute;
			left: 50%;
			top: 50%;
			border-right: 100px solid transparent;
			border-bottom: 70px solid gold;
			border-left: 100px solid transparent;
			transform: translateX(-50%) translateY(-50%) rotate(35deg) scale(0.14);
		}
		.star-in:before {
			border-bottom: 80px solid gold;
			border-left: 30px solid transparent;
			border-right: 30px solid transparent;
			position: absolute;
			top: -45px;
			left: -65px;
			content: '';
			transform: rotate(-35deg);
		}
		.star-in:after {
			border-bottom: 70px solid gold;
			border-left: 100px solid transparent;
			border-right: 100px solid transparent;
			position: absolute;
			top: 3px;
			left: -105px;
			content: '';
			transform: rotate(-70deg);
		}
		@keyframes starLight