<!DOCTYPE html>
<html lang="cn">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>小桂子新年快乐</title>
		<style>
			* {
			    margin: 0;
			    padding: 0;
			    box-sizing: border-box;
			}
			.lantern-box {
			    position: fixed;
			    pointer-events: none;
			}
			.lantern-light {
			    position: relative;
			    width: 120px;
			    height: 90px;
			    background-color: #d8000f;
			    margin: 50px;
			    border-radius: 50%;
			    box-shadow: -5px 5px 50px 4px #fa6c00;
			    animation: swing 3s infinite ease-in-out;
			}
			.lantern-light::before,.lantern-light::after {
			    content:"";
			    position: absolute;
			    border:1px solid #dc8f03;
			    width: 60px;
			    height: 12px;
			    background: linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);
			    margin-left: 20px;
			    left: 10px;
			}
			.lantern-light::before{
			    top: -7px;
			    border-top-left-radius: 5px;
			    border-top-right-radius: 5px;
			}
			.lantern-light::after {
			    bottom: -7px;
			    border-bottom-left-radius: 5px;
			    border-bottom-right-radius: 5px;
			}
			.lantern-line {
			    width: 2px;
			    height: 50px;
			    background-color: #dc8f03;
			    position: absolute;
			    top: -50px;
			    left: 60px;
			}
			.lantern-circle,.lantern-rect {
			    height: 90px;
			    border-radius: 50%;
			    border: 2px solid #dc8f03;
			    background-color: rgba(216,0,15,.1);
			}
			.lantern-circle {
			    width: 100px;
			    margin:12px 8px 8px 10px;
			}
			.lantern-rect {
			    margin: -2px 8px 8px 26px;
			    width: 45px;
			}
			.lantern-text {
			    font:bold 2rem / 85px 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
			    text-align: center;
			    color:#dc8f03;
			}
			.lantern-tassel-top {
			    width: 5px;
			    height: 20px;
			    background-color: #ffa500;
			    border-radius: 0 0 5px 5px;
			    position: relative;
			    margin:-5px 0 0 59px;
			    animation: swing 3s infinite ease-in-out;
			}
			.lantern-tassel-middle,.lantern-tassel-bottom {
			    position: absolute;
			    width: 10px;
			    left: -2px;
			}
			.lantern-tassel-middle{
			    border-radius: 50%;
			    top: 14px;
			    height: 10px;
			    background-color: #dc8f03;
			    z-index: 2;
			}
			.lantern-tassel-bottom  {
			    background-color: #ffa500;
			    border-bottom-left-radius: 5px;
			    height: 35px;
			    top: 18px;
			    z-index: 1;
			}
			@keyframes swing {
			    0% {
			        transform: rotate(-10deg);
			    }
			    50% {
			        transform: rotate(10deg);
			    }
			    100% {
			        transform: rotate(-10deg);
			    }
			}
			.container .lantern-box:first-child{
			    left: 10px;
			    top: -30px;
			}
			.container .lantern-box:nth-child(2) {
			    left: 160px;
			    top: -25px;
			}
			.container .lantern-box:nth-child(3) {
			    right: 160px;
			    top: -28px;
			}
			.container .lantern-box:last-child {
			    right: 10px;
			    top: -26px;
			}
		</style>

	</head>
	<body>

		<div class="container">
			<-- 中桂子制作 -->
		</div>

		<script>
			const fonts = ['新', '年', '快', '乐'];
			const createLayOut = (value) => `
			        <div class="lantern-box">
			            <div class="lantern-light">
			                <div class="lantern-line"></div>
			                <div class="lantern-circle">
			                    <div class="lantern-rect">
			                        <div class="lantern-text">${value}</div>
			                    </div>
			                </div>
			                <div class="lantern-tassel-top">
			                    <div class="lantern-tassel-middle"></div>
			                    <div class="lantern-tassel-bottom"></div>
			                </div>
			            </div>
			        </div>
			    `;
			let containerHTML = '';
			fonts.forEach(item => containerHTML += createLayOut(item));
			document.querySelector('.container').innerHTML = containerHTML;
		</script>

	</body>
</html>

新年快乐灯笼 css + html + js

效果图如下：代码在这里：<!DOCTYPE html>
<html lang="cn">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>小桂子新年快乐</title>
		<style>
			* {

先锋会员

编程语言

前端

架构设计

参与人人有奖，腾讯云大模型知识引擎×DeepSeek最佳实践有奖征文正在进行中！点击查看活动详情：<a href="https://cloud.tencent.com/developer/article/2496399" target="_blank">https://cloud.tencent.com/developer/article/2496399</a><br/> 
 <img src="https://qcloudimg.tencent-cloud.cn/raw/e8d8f79b0ec4658f3274a7d56238daf4.jpg"/>

大模型知识引擎×DeepSeek实践征文

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯云AI代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

文章&问答评论现已支持表情

腾讯云开发者社区是腾讯云官方开发者社区，致力于打造开发者的技术分享型社区。提供专栏,问答，沙龙等产品和服务，汇聚海量精品云计算使用和开发经验，致力于帮助开发者快速成长与发展，营造开放的云计算技术生态圈。

新年快乐灯笼 css + html + js-腾讯云开发者社区-腾讯云

新年快乐灯笼 css + html + js

新年快乐灯笼 css + html + js

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐