当前位置： 首页 > news >正文

女神节灯笼祝福【HTML+CSS】

news 2025/7/11 6:24:40

在这里插入图片描述

✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：前端案例分享专栏
✨特色专栏：国学周更-心性养成之路
🥭本文内容：女神节灯笼祝福【HTML+CSS】

文章目录

    • ❤️ 背景简介
    • ❤️ 运行效果展示
    • ❤️ 代码分享
    • ❤️ 女神节祝福语

在这里插入图片描述

❤️ 背景简介

  你知道吗？世界上第一位电脑程序设计师是名女性：Ada Lovelace (1815-1852)是一位英国数学家兼作家，她是第一位主张计算机不只可以用来算数的人，也发表了第一段分析机用的演算法。因此，Ada 被公认为史上第一位认识电脑完全潜能的人，也是史上第一位电脑程序设计师。

  Grace Hopper (1906-1992)是最早的计算机之一哈佛Mark I的第一批程序员，并为第一个程序设计语言设计了编译器。她是 COBOL 语言的设计者，常被称为 COBOL 之母。除了语言设计之外，她在语言标准化方面也做出了奠基性的贡献。

  这些出色女性在不同领域熠熠生辉，创造了无限的可能，成为了IT发展进步中不可或缺的角色。Z世代的女性开发者们不仅学会编程的年龄逐渐提前，甚至在某些编程语言上比男性的表现更出色。女性开发者们用实际经历和成果印证着这些结论。不少“程序媛”们在AI代码的世界里让梦想生根、开花。不分年龄、无论背景，她们释放着热情与专业，用技术为自己代言。

  为了致敬女性开发者，我这边用灯笼代码送出我的祝福：祝愿全天下所有的女性朋友们，节日快乐，永远做那个笑靥如花的 女神！

❤️ 运行效果展示

在前端页面动态展示灯笼的效果：

在这里插入图片描述

❤️ 代码分享

💞 HTML 代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link href="css/nvs.css" rel="stylesheet"/></head><body><!-- 灯笼1 --><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><!-- 灯笼2 --><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><!-- 灯笼3 --><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><!-- 灯笼4 --><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><!-- 灯笼5 --><div class="deng-box4"><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></body>
</html>

💞 CSS 代码如下：

.deng-box {position: fixed;top: 30px;left: 70%;z-index: 999;
}.deng-box1 {position: fixed;top: 28px;left: 60%;z-index: 999;
}.deng-box2 {position: fixed;top: 28px;left: 40%;z-index: 999;
}.deng-box3 {position: fixed;top: 28px;left: 30%;z-index: 999;
}.deng-box4 {position: fixed;top: 28px;left: 20%;z-index: 999;
}.deng-box5 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}.deng-box4 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}.deng-box3 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}.deng-box2 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}.deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 3s infinite ease-in-out;box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}.deng-a {width: 100px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, 0.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, 0.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: #ffa500;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: #ffa500;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: #ffa500;background: linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#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: #ffa500;background: linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);
}.deng-t {font-family: 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif;font-size: 3.2rem;color: #FFF326;font-weight: bold;line-height: 85px;text-align: center;
}.night .deng-t,
.night .deng-box,
.night .deng-box1,
.night .deng-box2,
.night .deng-box3,
.night .deng-box4 {background: transparent !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);}
}

至此，一个动态的 “女生节快乐” 动态灯笼边实现成功了！

❤️ 女神节祝福语

  • 愿你好好爱自己，活成独立坚强的模样，做自己的女王，勇敢地大步向前，心之所向，终会抵达。
  • 我一天一天明白你的平凡，同时却一天一天愈更深切地爱你。你如照镜子，你不会看得见你特别好的所在，但你如走进我的心里来时，你一定能知道自己是怎样好法。
  • 永为少女，一世芳华。
  • 女人，可能是姐妹、是妻子、是母亲，用自己的人生，努力做好每一个角色，那么这一天就做只属于自己的女神吧。

在这里插入图片描述

  • 星星闪烁着为你舞蹈，月亮微笑着为你祝福，在这欢乐的时刻，我想悄悄的对你说：女神节快乐！
  • 希望你内外兼修，拥有智慧，拥有韵味，做你想做。
  • 希望你真挚幽默，一路向前，不曾后悔 ，女王节快乐。
  • 花儿美丽，只为你开;草儿嫩绿，只为你弯；柳条多姿，只为你摇；我的祝福，只为你写；送去我温馨的问候：女神节开心快乐！
  • 你和蒙娜丽莎比笑，蒙娜丽莎气哭了;你和梦露比性感，梦露恼得腿抽筋了;你和赵飞燕比身材，赵飞燕失宠了;你和四大美人比美，她们一个个全疯了。祝女神节快乐!
  • 清晨的头滴滴甘露非要沾湿你的长发才肯下凡，正午的阳光硬要抹过你的笑脸才愿偏西，傍晚的春风偏要拂过你的身段才甘入夜。愿女神节你主宰一切!

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。

在这里插入图片描述

相关文章：

女神节灯笼祝福【HTML+CSS】

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程日记 2023/4/26 21:51:42

CUDA并行计算基础知识

1、相关缩写术语 显卡：GPU 显卡驱动：驱动软件 GPU架构: 硬件的设计方式，例如是否有L1 or L2缓存 CUDA: 一种编程语言像C++, Python等，只不过它是专门用来操控GPU的 cudnn: 一个专门为深度学习计算设计的软件库，里面提供了很多专门的计算函数 CUDAToolkit：所谓的装cuda首先…...

编程日记 2023/4/26 21:51:39

88. 合并两个有序数组

给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。注意&#xff1a;最终&#xff0c;合并后数组不应…...

编程日记 2023/4/26 21:51:36

卢益贵（码客）：软件开发团队的管理要素

卢益贵&#xff08;码客&#xff09;&#xff1a;软件开发团队的管理要素 最好的范例是领导 无论个人素养、技术水平和代码风格&#xff0c;管理者应该起到典范的作用。 最高的权力是威望 管理者的威望比手中权力更有信服力。在处处倚仗权力施压的团队中&#xff0c;高压必有…...

编程日记 2023/4/26 21:51:33

中小企业的TO B蓝海，如何「掘金」？

中国中小企业的数字化转型土壤&#xff0c;如今究竟成长到了哪一步&#xff1f;对一众数字服务厂商而言&#xff0c;在另一个付费群体出现的当下&#xff0c;产品形态是否应该进行微调&#xff1f; 作者|皮爷 出品|产业家 中国市场存在一个黄金定律&#xff1a;二八法则。 这…...

编程日记 2023/4/26 21:51:31

C++ 算法主题系列之集结0-1背包问题的所有求解方案

1. 前言 背包问题是类型问题&#xff0c;通过对这一类型问题的理解和掌握&#xff0c;从而可以归纳出求解此类问题的思路和模板。 背包问题的分类有&#xff1a; 0-1背包问题&#xff0c;也称为不可分割背包问题。无限背包问题。判定性背包问题.带附属关系的背包问题。双背包…...

编程日记 2023/4/26 21:51:28

【Vue】Vue常见的6种指令

Vue的6种指令-前言指令&#xff08;Directives&#xff09;是vue 为开发者提供的模板语法&#xff0c;用于辅助开发者渲染页面的基本结构。vue 中的指令按照不同的用途可以分为如下6 大类① 内容渲染指令 ② 属性绑定指令 ③ 事件绑定指令 ④ 双向绑定指令 ⑤ 条件渲染指令 ⑥ …...

编程日记 2023/4/26 21:51:25

计算机科学与技术(嵌入式)四年学习资料_文件目录树

说明&#xff1a; 资料内容主要包括&#xff1a;计嵌专业2019级大学四年主要科目的各种电子资料&#xff0c;有电子实验报告、课程设计报告、课程设计项目、整理复习笔记、电子书、ppt、练习题、期末试卷、部分课程软件资源、科创项目&#xff0c;职业生涯规划书&#xff0c;大…...

编程日记 2023/4/27 3:26:02

【java】Java 继承

文章目录继承的概念生活中的继承&#xff1a;类的继承格式为什么需要继承公共父类&#xff1a;继承类型继承的特性继承关键字extends关键字implements关键字super 与 this 关键字final 关键字构造器继承的概念 继承是java面向对象编程技术的一块基石&#xff0c;因为它允许创建…...

编程日记 2023/4/27 3:26:00

自媒体账号数据分析从何入手？

账号的数据可以直接反应这个账号的好坏&#xff0c;数据越高收益就会越好&#xff0c;数据越差收益自然高不了。 新手要从哪些方面入手见效更快呢&#xff1f;今天大周就来把自己的经验分享给粉丝们&#xff01; 1、账号定位 &#xff08;1&#xff09;账号所创作的领域 &a…...

编程日记 2023/4/27 3:25:58

Clickhouse新版本JSON字段数据写入方式

Clickhouse新版本JSON字段数据写入方式 在Clickhouse版本22.3.1版本以上&#xff0c;提供了针对JSON格式数据的新的数据类型&#xff1a;JSON&#xff0c;从而实现了存储此类数据由原先的结构化表结构&#xff0c;更新为现在的半结构化表存储。对于新增字段&#xff0c;某些同…...

编程日记 2023/4/27 3:25:56

HNU-电路与电子学-实验2

实验二 模型机组合部件的实现&#xff08;一&#xff09; 班级 计XXXXX 姓名 wolf 学号 2021080XXXXX 一、实验目的 1&#xff0e;了解简易模型机的内部结构和工作原理。 2&#xff0e;熟悉译码器、运算器的工作原理。 3&#xff0e;分析模型机的功…...

编程日记 2023/4/27 3:25:54

从0开始学python -49

Python MySQL - mysql-connector 驱动 -2 插入数据 插入数据使用 “INSERT INTO” 语句&#xff1a; demo_mysql_test.py: 向 sites 表插入一条记录。 import mysql.connectormydb mysql.connector.connect(host"localhost",user"root",passwd"…...

编程日记 2023/4/27 3:25:52

Spring MVC 详解（连接、获取参数、返回数据）

在之前我们先简单那谈谈Spring、SpringBoot以及Spring MVC框架之间有什么关系&#xff1f;首先Spring是一个框架&#xff0c;SpringBoot脚手架是为了快速开发Spring框架而创造的技术。可以理解为SpringBoot又在Spring上面包了一层壳子&#xff0c;是基于Spring的&#xff0c;是…...

编程日记 2023/4/27 3:25:50

IT女神节（致敬中国IT界永远的女神严蔚敏-数据结构）

我们都知道程序数据结构算法。相信很多人都学过严蔚敏的数据结构的课程。作为一个码农&#xff0c;在这不管是3.7女神节&#xff0c;还是3.8妇女节。我觉得都有必要向这些教育界的老前辈致敬。今天我就梳理梳理&#xff0c;最经典的数据结构教材。 严蔚敏介绍&#xff08;来自…...

编程日记 2023/4/27 3:25:48

Java 集合分页

一、前言 在Java开发中&#xff0c;若单次展示的数据量太大&#xff0c;会造成程序响应缓慢&#xff0c;就需要用到 分页 功能&#xff0c;每一页展示一定量的数据&#xff0c;分多次展示 ... 那么在List集合中&#xff0c;如何实现 分页 功能呢&#xff1f; 本文将以3种方式&a…...

编程日记 2023/4/27 3:25:46

代码随想录之哈希表（力扣题号）

242. 有效的字母异位词 直接用数组模拟哈希表 只有小写字母&#xff0c;开26的数组就可以了 class Solution {public boolean isAnagram(String s, String t) {//24-28int[] hash new int[26];Arrays.fill(hash,0);for(int i0;i<s.length();i){hash[s.charAt(i)-a];}for(i…...

编程日记 2023/4/27 3:25:43

如何在知行之桥EDI系统中定时自动更换交易伙伴AS2证书？

为了保证客户与交易伙伴之间数据传输的安全性&#xff0c;AS2传输协议中&#xff0c;通常会通过一对数字证书对传输数据进行签名和加密。但是证书是有有效期的&#xff0c;在证书到期之前&#xff0c;需要贸易双方及时更换新的证书。 在更新证书时&#xff0c;由于客户通常是和…...

编程日记 2023/4/27 3:25:41

辽宁千圣文化：抖音店铺怎么做二次优化？

抖音商品卡订单是指永华在抖音、抖音极速版&#xff0c;通过直播的方式出现短视频页面商品卡之后&#xff0c;直接成交商品详情页直接成交后的订单&#xff0c;那么跟着辽宁千圣文化小编来一起看看吧&#xff01;一.与政策有关1.什么是「商品卡订单」&#xff1f;用户通过抖音、…...

编程日记 2023/4/27 3:25:39

检测js代码中可能导致内存泄漏的工具

JavaScript 中闭包等问题可能导致内存泄漏&#xff0c;因为闭包中引用的变量不会被垃圾回收器自动释放。以下是一些可以用来检测 JavaScript 代码中可能导致内存泄漏的工具&#xff1a; 1、Chrome 开发者工具 Chrome 开发者工具中有一个 Heap Profiler 工具&#xff0c;可以帮…...

编程日记 2023/4/27 3:25:37

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/6/15 20:37:19

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/7/9 12:59:42

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/6/21 8:10:07

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/7/9 4:32:47

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/7/11 1:50:50

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/7/5 18:42:22

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/7/7 21:55:30

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/6/21 8:18:07

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

编程新知 2025/7/10 10:40:33

链式法则中 复合函数的推导路径 多变量“信息传递路径”

非常好&#xff0c;我们将之前关于偏导数链式法则中不能“约掉”偏导符号的问题&#xff0c;统一使用 二重复合函数&#xff1a; z f ( u ( x , y ) , v ( x , y ) ) \boxed{z f(u(x,y),\ v(x,y))} zf(u(x,y), v(x,y))​ 来全面说明。我们会展示其全微分形式&#xff08;偏导…...

编程新知 2025/7/9 0:11:41