【HTML | CSS】春节将至，为网页挂上精美的灯笼吧（附源码）程序员的浪漫

news2024/12/25 23:42:56

在这里插入图片描述

💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。

💅文章概要： 各位小伙伴们大家好呀！2023农历春节将至，全国各地到处充满了年味，是时候也该让我们的网页也挂上红灯笼，一起享受2023农历兔年春节的喜庆！让网页也充满年味！

🤟每日一言： 永远年轻，永远热泪盈眶！

目录

  • 前言
  • 灯笼效果演示
    •  PC端灯笼效果
    •  移动端灯笼效果
    •  IPAD竖屏灯笼效果
    •  IPAD横屏灯笼效果
    • 实现思路
    •  灯笼外观设计
      •   HTML+CSS源码
    •  灯笼红线设计
      •   CSS源码
      •   HTML源码
    •  灯笼骨架设计
      •   CSS源码
      •   HTML源码
    •  灯笼穗设计
      •   CSS源码
      •   HTML源码
    •  灯笼流苏设计
      •   CSS源码
      •   HTML源码
    •  灯笼穗与流苏间圆形环节设计
      •   CSS源码
      •   HTML源码
    •  灯笼内部字体设计
      •   CSS源码
      •   HTML源码
    •  灯笼动效设计
      •   CSS源码
  • 完整源码
  • 写在最后的话

前言

在这里插入图片描述

各位小伙伴们大家好呀！2023农历春节将至，全国各地到处充满了年味，是时候也该让我们的网页也挂上红灯笼，一起享受2023农历兔年春节的喜庆！让网页也充满年味！

灯笼效果演示

  下面展示四种情况下的灯笼效果演示，包括 PC端，移动端，IPAD竖屏和IPAD横屏

 PC端灯笼效果

在这里插入图片描述

 移动端灯笼效果

在这里插入图片描述

 IPAD竖屏灯笼效果

在这里插入图片描述

 IPAD横屏灯笼效果

在这里插入图片描述

实现思路

  看完效果图后，各位小伙伴们肯定很想知道实现的思路，接下来我将分步骤逐一进行讲解，如果想要获取源码的小伙伴可以跳过该部分，直接前往最后的完整源码章节！，在分步讲解中我会将HTML，CSS两个部分全部放在同一个文件中，方便各位小伙伴们获取!
  我将实现思路分成了如下八个部分，列举如下：

  • 灯笼外观设计
  • 灯笼红线设计
  • 灯笼骨架设计
  • 灯笼穗设计
  • 灯笼流苏设计
  • 灯笼穗与流苏间圆形环节设计
  • 灯笼内部字体设计
  • 灯笼动效设计

 灯笼外观设计

在这里插入图片描述

  通过使用HTML和CSS可以完成灯笼的外观设计

  HTML+CSS源码

<style>
.deng-box2 {
	position: fixed;
	top: -40px;
	left: -20px;
	z-index: 9999;
	pointer-events: none
}
.deng {
	position: relative;
	width: 120px;
	height: 90px;
	margin: 50px;
	background: #d8000f;
	background: rgba(216,0,15,.8);
	border-radius: 50% 50%;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 3s infinite ease-in-out;
	box-shadow: -5px 5px 50px 4px #fa6c00
}
.deng:before {
	position: absolute;
	top: -7px;
	left: 29px;
	height: 12px;
	width: 60px;
	content: " ";
	display: block;
	z-index: 999;
	border-radius: 5px 5px 0 0;
	border: solid 1px #dc8f03;
	background: orange;
	background: linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)
}
.deng:after {
	position: absolute;
	bottom: -7px;
	left: 10px;
	height: 12px;
	width: 60px;
	content: " ";
	display: block;
	margin-left: 20px;
	border-radius: 0 0 5px 5px;
	border: solid 1px #dc8f03;
	background: orange;
	background: linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)
}
</style>
  <div class="deng-box2">
   <div class="deng">
   </div>
  </div>

 灯笼红线设计

在这里插入图片描述

  CSS源码

  复制如下源码添加到<style></style>标签之间：

.xian {
	position: absolute;
	top: -20px;
	left: 60px;
	width: 2px;
	height: 20px;
	background: #dc8f03
}

  HTML源码

  复制如下源码添加到 <div class="deng"></div>标签之间：

 <div class="xian"></div>

 灯笼骨架设计

在这里插入图片描述

  CSS源码

  复制如下源码添加到<style></style>标签之间：

.deng-a {
	width: 100px;
	height: 90px;
	background: #d8000f;
	background: rgba(216,0,15,.1);
	margin: 12px 8px 8px 8px;
	border-radius: 50% 50%;
	border: 2px solid #dc8f03
}

.deng-b {
	width: 45px;
	height: 90px;
	background: #d8000f;
	background: rgba(216,0,15,.1);
	margin: -4px 8px 8px 26px;
	border-radius: 50% 50%;
	border: 2px solid #dc8f03
}

  HTML源码

  复制如下源码添加到 <div class="xian"></div>标签下面：

 <div class="deng-a">
     <div class="deng-b">
     </div>
 </div>

 灯笼穗设计

在这里插入图片描述

  CSS源码

  复制如下源码添加到<style></style>标签之间：

.shui-a {
	position: relative;
	width: 5px;
	height: 20px;
	margin: -5px 0 0 59px;
	-webkit-animation: swing 4s infinite ease-in-out;
	-webkit-transform-origin: 50% -45px;
	background: orange;
	border-radius: 0 0 5px 5px
}

  HTML源码

  复制如下源码添加到倒数第二个 </div>标签上方：

<div class="shui shui-a">
</div>

 灯笼流苏设计

在这里插入图片描述

  CSS源码

  复制如下源码添加到<style></style>标签之间：

.shui-c {
	position: absolute;
	top: 18px;
	left: -2px;
	width: 10px;
	height: 35px;
	background: orange;
	border-radius: 0 0 0 5px
}

  HTML源码

  复制如下源码添加到<div class="shui shui-a"> </div>标签之间：

<div class="shui-c"></div>

 灯笼穗与流苏间圆形环节设计

在这里插入图片描述

  CSS源码

  复制如下源码添加到<style></style>标签之间：

.shui-b {
	position: absolute;
	top: 14px;
	left: -2px;
	width: 10px;
	height: 10px;
	background: #dc8f03;
	border-radius: 50%
}

  HTML源码

  复制如下源码添加到<div class="shui shui-b"> </div>标签下方：

<div class="shui-b"></div>

 灯笼内部字体设计

在这里插入图片描述

  CSS源码

  复制如下源码添加到<style></style>标签之间：

.deng-t {
	font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
	font-size: 3.2rem;
	color: #dc8f03;
	font-weight: 700;
	line-height: 85px;
	text-align: center
}

  HTML源码

  复制如下源码添加到<div class="deng-b"> </div>标签之间：

<div class="deng-t">年</div>

 灯笼动效设计

在这里插入图片描述

  CSS源码

  复制如下源码添加到<style></style>标签之间：

@-moz-keyframes swing {
	0% {
		-moz-transform: rotate(-10deg)
	}

	50% {
		-moz-transform: rotate(10deg)
	}

	100% {
		-moz-transform: rotate(-10deg)
	}
}

@-webkit-keyframes swing {
	0% {
		-webkit-transform: rotate(-10deg)
	}

	50% {
		-webkit-transform: rotate(10deg)
	}

	100% {
		-webkit-transform: rotate(-10deg)
	}
}

完整源码

  上面讲解了单个的灯笼的实现步骤，这里给出四个灯笼的完整源码，只需复制代码并且粘贴到网页的</body>标签之前即可！

<div class="deng-box2"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">年</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box3"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">新</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">乐</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">快</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><style type="text/css">.deng-box{position:fixed;top:-40px;right:-20px;z-index:9999;pointer-events:none}.deng-box1{position:fixed;top:-30px;right:10px;z-index:9999;pointer-events:none}.deng-box2{position:fixed;top:-40px;left:-20px;z-index:9999;pointer-events:none}.deng-box3{position:fixed;top:-30px;left:10px;z-index:9999;pointer-events:none}.deng-box1 .deng,.deng-box3 .deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 5s infinite ease-in-out;box-shadow:-5px 5px 30px 4px #fc903d}.deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px #fa6c00}.deng-a{width:100px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:12px 8px 8px 8px;border-radius:50% 50%;border:2px solid #dc8f03}.deng-b{width:45px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:-4px 8px 8px 26px;border-radius:50% 50%;border:2px solid #dc8f03}.xian{position:absolute;top:-20px;left:60px;width:2px;height:20px;background:#dc8f03}.shui-a{position:relative;width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 4s infinite ease-in-out;-webkit-transform-origin:50% -45px;background:orange;border-radius:0 0 5px 5px}.shui-b{position:absolute;top:14px;left:-2px;width:10px;height:10px;background:#dc8f03;border-radius:50%}.shui-c{position:absolute;top:18px;left:-2px;width:10px;height:35px;background:orange;border-radius:0 0 0 5px}.deng:before{position:absolute;top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;z-index:999;border-radius:5px 5px 0 0;border:solid 1px #dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.deng:after{position:absolute;bottom:-7px;left:10px;height:12px;width:60px;content:" ";display:block;margin-left:20px;border-radius:0 0 5px 5px;border:solid 1px #dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.deng-t{font-family:华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;font-size:3.2rem;color:#dc8f03;font-weight:700;line-height:85px;text-align:center}.night .deng-box,.night .deng-box1,.night .deng-t{background:0 0!important}@-moz-keyframes swing{0%{-moz-transform:rotate(-10deg)}50%{-moz-transform:rotate(10deg)}100%{-moz-transform:rotate(-10deg)}}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg)}100%{-webkit-transform:rotate(-10deg)}}</style>

写在最后的话

  本文花费大量时间介绍了如何为网页挂上大红灯笼！，希望能帮助到各位小伙伴，码文不易，还望各位大佬们多多支持哦，你们的支持是我最大的动力！

在这里插入图片描述

✨ 原创不易，还希望各位大佬支持一下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！ \textcolor{9c81c1}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{ed7976}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！ \textcolor{98c091}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/173412.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

在线支付系列【2】支付宝和微信支付发展史

在线支付系列【2】支付宝和微信支付发展史

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 文章目录支付宝发展史起步阶段发展阶段上升阶段微信支付发展史支付宝 支付宝是阿里巴巴集团于 2004 年推出的一款第三方支付的产品&#xff0c;目前隶属于蚂蚁金服&#xff08;杭州&#xff09;网络技术…
阅读更多...
2023年最推荐苹果、华为、荣耀：一场“以人为中心”的口碑竞技

2023年最推荐苹果、华为、荣耀：一场“以人为中心”的口碑竞技

消费者需求是市场发展的风向标。经济学界早有洞察&#xff0c;诺贝尔经济学奖得主哈耶克曾提出“消费者主权”理论&#xff0c;认为生产什么&#xff0c;生产多少&#xff0c;应当由消费者的意愿和偏好决定。手机市场也是如此&#xff0c;存量竞争下&#xff0c;消费者进一步掌…
阅读更多...
软件测试复习09：集成测试、系统测试、验收测试、回归测试

软件测试复习09：集成测试、系统测试、验收测试、回归测试

作者&#xff1a;非妃是公主 专栏&#xff1a;《软件测试》 个性签&#xff1a;顺境不惰&#xff0c;逆境不馁&#xff0c;以心制境&#xff0c;万事可成。——曾国藩 文章目录集成测试集成测试方法自顶向下自底向上系统测试验收测试回归测试集成测试 把模块拼装到一起&#…
阅读更多...
【电力系统经济调度】多元宇宙算法求解电力系统多目标优化问题（Matlab实现）【电气期刊论文复现】

【电力系统经济调度】多元宇宙算法求解电力系统多目标优化问题（Matlab实现）【电气期刊论文复现】

目录 0 概述 1 环境经济调度数学模型 2 多元宇宙算法 3 运行结果 4 Matlab代码实现 目录 0 概述 1 环境经济调度数学模型 2 多元宇宙算法 3 Matlab代码实现 3.1 主函数&#xff1a; 3.2 目标函数 4 运行结果 0 概述 多元宇宙算法求解电力系统多目标优化算法有…
阅读更多...
【GD32F427开发板试用】CAN总线了解和回环测试

【GD32F427开发板试用】CAN总线了解和回环测试

本篇文章来自极术社区与兆易创新组织的GD32F427开发板评测活动&#xff0c;更多开发板试用活动请关注极术社区网站。作者&#xff1a;HonestQiao CAN总线是个好东西&#xff0c;据说用了的都说好。只要是09年之后的车都有CAN总线&#xff0c;要是摸得透的话&#xff0c;你还能通…
阅读更多...
微信小程序开发尚学堂 介绍 项目结构 组件

微信小程序开发尚学堂 介绍 项目结构 组件

一、微信小程序介绍1. 微信小程序介绍微信小程序&#xff0c;简称小程序&#xff0c;是一种不需要下载安装即可使用的应用&#xff0c;它实现了应用”触手可及”的梦想&#xff0c;用户扫一扫或搜一下即可打开应用。说明&#xff1a;小程序是需要下载的&#xff0c;小程序的占用…
阅读更多...
用于多核DSP开发的核间通信

用于多核DSP开发的核间通信

TI的多核DSP以TMS320C6678为例&#xff0c;它是多核同构的处理器&#xff0c;内部是8个相同的C66x CorePac。对其中任意一个核的开发就和单核DSP开发的流程是类似的。   但是如果仅仅只是每个核独立开发&#xff0c;那么很难体现出多核的优势。要充分发挥多核处理器的性能&am…
阅读更多...
Docker 应用实践-容器篇

Docker 应用实践-容器篇

在 Docker 镜像篇中&#xff0c;我们了解到 Docker 镜像类似于模板&#xff0c;那么 Docker 容器就相当于从模板复制过来运行时的实例&#xff0c;Docker 容器可以被创建、复制、暂停和删除等。 每一个 Docker 容器在运行时都是以镜像为基础层&#xff0c;并在镜像的基础上创建…
阅读更多...
PWM 应用

PWM 应用

1.PWM 同样也是通过 sysfs 方式进行操控&#xff0c;进入到/sys/class/pwm 目录下。8 个以 pwmchipX&#xff08;X 表示数字 0~7&#xff09;命名的文件夹&#xff0c;这八个文件夹其实就对应了 I.MX6U的 8 个 PWM 控制器&#xff0c; I.MX6U 总共有 8 个 PWM 控制器。2.进入到…
阅读更多...
云GPU服务器部署及pycharm远程连接

云GPU服务器部署及pycharm远程连接

我们在之前使用CoLab来运行项目&#xff0c;但其存在时长限制问题所以并不是很理想&#xff0c;今天博主发现腾讯云服务目前在搞活动&#xff0c;比较实惠&#xff0c;便买了一台来体验一下。 直接搜索gpu服务器租用即可找到 购买服务器 博主买的是NVIDIA T4 GPU,还是较有性…
阅读更多...
web流程设计器andflow_js已支持自定义颜色

web流程设计器andflow_js已支持自定义颜色

andflow_js 是一个web 开源流程设计框架&#xff0c;目前版本已支持对各类节点单独设置颜色。除了颜色之外&#xff0c;andflow_js还支持通过setActionInfo、setGroupInfo、setListInfo、setTipInfo 等设置节点各种参数。 设置节点的颜色&#xff1a; 设置节点边框颜色 and…
阅读更多...
Arduino环境下对NodeMCU ESP8266的闪存flash系统使用

Arduino环境下对NodeMCU ESP8266的闪存flash系统使用

flash存储简答介绍 参考&#xff1a;https://www.elecfans.com/consume/572040.html flash存储器又称闪存&#xff08;快闪存储器&#xff09;&#xff0c;就其本质而言&#xff0c;flash存储器属于EEPROM&#xff08;电擦除可编程只读存储器&#xff09;类型。是一种长寿命的…
阅读更多...
矩阵求导学习

矩阵求导学习

布局 分子布局 ∂y∂x(∂y∂x1∂y∂x2⋯∂y∂xn)\frac{\partial y}{\partial \mathbf{x}} \begin{pmatrix} \frac{\partial y}{\partial x_1} & \frac{\partial y}{\partial x_2} &\cdots & \frac{\partial y}{\partial x_n} \end{pmatrix} ∂x∂y​(∂x1​∂y​​…
阅读更多...
tkinter绘制组件（38）——状态开关按钮

tkinter绘制组件（38）——状态开关按钮

tkinter绘制组件&#xff08;38&#xff09;——状态开关按钮引言布局函数结构按钮主体渐变色处理颜色处理基础渐变色列表形成列表样式绑定完整函数代码效果测试代码最终效果github项目pip下载结语引言 TinUI里的状态开关按钮&#xff08;togglebutton&#xff09;和开关&…
阅读更多...
DPU网络开发SDK—DPDK(五)

DPU网络开发SDK—DPDK(五)

rte_eal_init 接上次内容继续对rte_eal_init()所做的工作进行分析。 18. 检查是否允许直接物理地址访问 rte_eal_using_phys_addrs()会去检查当前系统是否允许在进程虚拟地址空间直接访问物理地址。需要有两个支持条件&#xff1a;存在大页内存和能够进行虚拟地址到物理地址…
阅读更多...
智云通CRM：如何把握拓客成交的三种时间？

智云通CRM：如何把握拓客成交的三种时间？

在我们邀约、拜访及展示产品之后&#xff0c;客户就一定会成为你的客户吗&#xff1f;当然不尽然&#xff0c;这取决于众多因素。任何事情都不是一蹴而就的&#xff0c;我们不能刚到某个场合认识了一个人&#xff0c;就一定要立即成交&#xff0c;或者反过来因为对方此时没有需…
阅读更多...
Pytorch实战笔记(2)——CNN实现情感分析

Pytorch实战笔记(2)——CNN实现情感分析

本文展示的是使用 Pytorch 构建一个 TextCNN 来实现情感分析。本文的架构是第一章详细介绍 TextCNN&#xff08;不带公式版&#xff09;&#xff0c;第二章是核心代码部分。 目录1. TextCNN2. TextCNN 实现情感分析参考1. TextCNN 相较于 LSTM 而言&#xff0c;我个人其实是没…
阅读更多...
手把手教你学51单片机-C语言基础

手把手教你学51单片机-C语言基础

二进制、十进制和十六进制 对于二进制来说，8 位二进制我们称之为一个字节。 我们在进行 C 语言编程的时候，我们只写十进制和十六进制，那么不带 0x 的就 是十进制，带了 0x 符号的就是十六进制。 C 语言变量类型和范围 C 语言的数据基本类型分为字符型、整型、长整型以及…
阅读更多...
【算法题解】12. 删除链表中的节点

【算法题解】12. 删除链表中的节点

文章目录题目题解Java 代码实现Go 代码实现复杂度分析这是一道简单题&#xff0c;题目来自 leetcode 题目 给定一个单链表的 head&#xff0c;我们想删除它其中的一个节点 node。 只给你一个需要删除的节点 node 。你将 无法访问 第一个节点 head。 链表的所有值都是 唯一的&…
阅读更多...
1.吴恩达机器学习课程笔记：多元梯度下降法

1.吴恩达机器学习课程笔记：多元梯度下降法

1.吴恩达机器学习课程笔记&#xff1a;多元梯度下降法 笔记来源&#xff1a;吴恩达机器学习课程笔记&#xff1a;多元梯度下降法 仅作为个人学习笔记&#xff0c;若各位大佬发现错误请指正 1.1 多元特征&#xff08;变量&#xff09; 每一列代表一个特征&#xff0c;例如&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023