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

分享2款CSS3母亲节主题寄语文字动画特效

news 2025/7/8 0:01:29

目录

❤️ 前言

第一款：妈妈您辛苦了！

一、效果图

二、代码实现 

第二款：Mother's Day！

一、效果图

二、代码实现 

❤️ 祝福 

 

❤️ 前言

母亲节，在每年五月的第二个星期日，是用来感谢母亲的节日。鸦有反哺之义，羊有跪乳之恩，马无欺母之心，母亲给予的爱是无私而伟大的，为人子女要懂得感恩。

眼见母亲节马上就要到了，在这里分享2款CSS3母亲节主题的网页动画特效，纯C3代码，简单易懂，如果有喜欢的小伙伴们，可以收藏一下！

第一款：妈妈您辛苦了！

这是一款很温馨的CSS3母亲节感恩节主题寄语文字背景动画特效，也可以运用于其他场景，首先要选一张氛围合适的背景图，再配上文字就可以了。

话不多说，先看看效果图吧！  (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ

一、效果图

二、代码实现 

2.1 html

* index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>妈妈您辛苦了</title><link rel="stylesheet" href="css/style.css" /></head><body style="background-image: url('img/802.jpg'); background-repeat: no-repeat"><div style="margin: 80px 0 80px 200px"><div class="loader font1"><span>" </span><span class="span2">I</span><span class="span3">love</span><span class="span4">you</span><span class="span5">，</span><span class="span6">just</span><span class="span7">like</span></div><div class="loader font2"><span>the</span><span class="span2">first</span><span class="span3">.</span><span class="span4">" </span><span class="span5">My</span><span class="span6">mother</span><span class="span7">who</span></div><div class="loader font3"><span>has</span><span class="span2">been</span><span class="span3">caring</span><span class="span4">for</span><span class="span5">my</span><span class="span6">growth</span><span class="span7">has</span></div><div class="loader font4"><span>been</span><span class="span2">hard</span><span class="span3">.</span></div></div><div style="margin: 120px 0 120px 500px"><div class="font3" style="font-size: 25px"><span>“我爱你，一如最初。”一直呵护我成长的妈妈，辛苦了。</span></div></div></body>
</html>

2.2 CSS

* style.css

@keyframes loading {0%, 100% {-moz-transform: scale(1) r1otateZ(0deg);-ms-transform: scale(1) r1otateZ(0deg);-webkit-transform: scale(1) r1otateZ(0deg);transform: scale(1) r1otateZ(0deg);opacity: 1;-o-transform: scale(1) r1otateZ(0deg);
}26% {-moz-transform: scale(1.1) rotateZ(12deg);-ms-transform: scale(1.1) rotateZ(12deg);-webkit-transform: scale(1.1) rotateZ(12deg);transform: scale(1.1) rotateZ(12deg);opacity: .2;}76% {-moz-transform: scale(0.8) rotateZ(-8deg);-ms-transform: scale(0.8) rotateZ(-8deg);-webkit-transform: scale(0.8) rotateZ(-8deg);transform: scale(0.8) rotateZ(-8deg);opacity: .6;}
}
.loader {overflow: hidden;font-size: 40px;
}.loader span {-moz-animation: loading 1s linear infinite -0.8s;-webkit-animation: loading 1s linear infinite -0.8s;animation: loading 1s linear infinite -0.8s;float: left;
}.loader .span2 {-moz-animation: loading 1s linear infinite -0.2s;-webkit-animation: loading 1s linear infinite -0.2s;animation: loading 1s linear infinite -0.2s;
}.loader .span3 {-moz-animation: loading 1s linear infinite -0.5s;-webkit-animation: loading 1s linear infinite -0.5s;animation: loading 1s linear infinite -0.5s;
}.loader .span4 {-moz-animation: loading 1s linear infinite -1.1s;-webkit-animation: loading 1s linear infinite -1.1s;animation: loading 1s linear infinite -1.1s;
}.loader .span5 {-moz-animation: loading 1s linear infinite -0.36s;-webkit-animation: loading 1s linear infinite -0.36s;animation: loading 1s linear infinite -0.36s;
}.loader .span6 {-moz-animation: loading 1s linear infinite -0.65s;-webkit-animation: loading 1s linear infinite -0.65s;animation: loading 1s linear infinite -0.65s;
}.loader .span7 {-moz-animation: loading 1s linear infinite -0.93s;-webkit-animation: loading 1s linear infinite -0.93s;animation: loading 1s linear infinite -0.93s;
}.font1 {font-family: 'Helvetica',Arial,sans-serif;
}.font2 {font-family: Impact;
}.font3 {font-family: "Times ";
}.font4 {font-family: "Comic Sans Ms",sans-serif;font-weight: bold;
}

第二款：Mother's Day！

Mother's Day！母亲节背景素材图，简单温馨，可用于你的主题网页设计中。

一、效果图

二、代码实现 

2.1 html

* index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mother&#39;s Day</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><link rel="stylesheet" href="./style.css">
</head>
<body><div class="dark fadeOut"></div><div class="sun slideIn"></div><h1 class="fadeIn">Happy Mothers' Day</h1><h2 class="fadeIn delay-1">Love Oli</h2><section class="flowers"><div class="flower"><div class="flower_head pulse"></div><div class="flower_stem grow-12"></div></div><div class="flower"><div class="flower_head pulse pink"></div><div class="flower_stem grow-15"></div></div><div class="flower"><div class="flower_head pulse yellow"></div><div class="flower_stem grow-9"></div></div></section>
</body>
</html>

2.2 CSS

* style.css

@import url(https://fonts.googleapis.com/css?family=Oleo+Script);
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
body {background: #45b9d3;color: white;overflow: hidden;
}.dark {position: absolute;width: 100%;top: 0;bottom: 0;background: rgba(29, 25, 52, 0.9);z-index: 5000;
}h1,
h2 {position: relative;text-align: center;font-family: "Poiret One", "Oleo Script", cursive;text-shadow: 1px 1px 1px rgba(77, 77, 77, 0.5);z-index: 1000;margin: 0;
}h1 {margin-top: 4.5rem;font-size: 8vw;
}h2 {font-size: 6vw;font-family: "Oleo Script", cursive;
}.sun {position: absolute;top: 2rem;left: 2rem;width: 3rem;height: 3rem;background: khaki;border-radius: 100%;box-shadow: 0 0 20px khaki;
}.flowers {position: absolute;width: 100%;bottom: 0;display: flex;justify-content: space-around;align-items: flex-end;
}.flower {display: flex;flex-direction: column;align-items: center;
}.flower_head {height: 7rem;width: 7rem;background: #cba8ed;border-radius: 100%;
}.flower_stem {width: 0.5rem;height: 20rem;max-height: 0;background: #86af6e;
}.flower_stem::after {content: "";margin-left: 0.5rem;margin-top: 1rem;width: 3em;height: 3em;display: block;background: #4d916e;border-radius: 2em 0 2em 0em;
}.yellow {width: 7.5rem;height: 7.5rem;background: khaki;
}.pink {width: 6rem;height: 6rem;background: #e2b1b1;
}.fadeIn {opacity: 0;-webkit-animation: fadeIn 1s 2s ease-in forwards;animation: fadeIn 1s 2s ease-in forwards;
}.slideIn {transform: translateX(-5rem);-webkit-animation: slideIn 3s ease-out forwards;animation: slideIn 3s ease-out forwards;
}.fadeOut {opacity: 1;-webkit-animation: fadeOut 4s 0.25s ease forwards;animation: fadeOut 4s 0.25s ease forwards;
}.delay-1 {-webkit-animation-delay: 3s;animation-delay: 3s;
}.grow-12 {-webkit-animation: grow-12 2s 0.5s ease-in-out forwards;animation: grow-12 2s 0.5s ease-in-out forwards;
}.grow-15 {-webkit-animation: grow-15 2s 1.5s ease-in-out forwards;animation: grow-15 2s 1.5s ease-in-out forwards;
}.grow-9 {-webkit-animation: grow-9 2s 2.5s ease-in-out forwards;animation: grow-9 2s 2.5s ease-in-out forwards;
}.pulse {-webkit-animation: pulse 1s 0.5s ease-in-out infinite alternate;animation: pulse 1s 0.5s ease-in-out infinite alternate;
}@-webkit-keyframes fadeIn {100% {opacity: 1;}
}@keyframes fadeIn {100% {opacity: 1;}
}@-webkit-keyframes slideIn {100% {transform: translateX(0);}
}@keyframes slideIn {100% {transform: translateX(0);}
}@-webkit-keyframes fadeOut {100% {opacity: 0;}
}@keyframes fadeOut {100% {opacity: 0;}
}@-webkit-keyframes grow-12 {100% {max-height: 14rem;}
}@keyframes grow-12 {100% {max-height: 14rem;}
}@-webkit-keyframes grow-15 {100% {max-height: 17rem;}
}@keyframes grow-15 {100% {max-height: 17rem;}
}@-webkit-keyframes grow-9 {100% {max-height: 11rem;}
}@keyframes grow-9 {100% {max-height: 11rem;}
}@-webkit-keyframes pulse {0% {transform: scale(1);}100% {transform: scale(1.1);}
}@keyframes pulse {0% {transform: scale(1);}100% {transform: scale(1.1);}
}@media (max-width: 480px) {h1 {font-size: 2.777rem;}h2 {font-size: 1.777rem;}
}

❤️ 祝福 

最后，预祝全天下的妈妈们，母亲节快乐！愿妈妈们岁岁年年温暖动人 ！

相关文章：

分享2款CSS3母亲节主题寄语文字动画特效

目录 ❤️ 前言 第一款&#xff1a;妈妈您辛苦了&#xff01; 一、效果图 二、代码实现 第二款&#xff1a;Mothers Day&#xff01; 一、效果图 二、代码实现 ❤️ 祝福 ❤️ 前言 母亲节&#xff0c;在每年五月的第二个星期日&#xff0c;是用来感谢母亲的节日。…...

编程日记 2023/5/3 18:38:11

【AutoGPT】AutoGPT出现，是否意味着ChatGPT已被淘汰

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 前言 什么是ChatGPT&#xff1f; 什么是AutoGPT&#xff1f; AutoGPT与ChatGPT的区别 AutoGPT的优势和劣势 优势 劣势 ChatGPT是否会被淘汰&#xff1f; 前言 近年来&#x…...

编程日记 2023/5/30 22:41:06

( 字符串) 9. 回文数 ——【Leetcode每日一题】

❓9. 回文数 难度&#xff1a;简单 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 例如…...

编程日记 2023/5/3 18:28:08

SpringAOP

SpringAOP 一、AOP1. AOP简介1.1 AOP简介和作用1.2 AOP中的核心概念 2. AOP入门案例【重点】2.1 AOP入门案例思路分析2.2 AOP入门案例实现【第一步】导入aop相关坐标【第二步】定义dao接口与实现类【第三步】定义通知类&#xff0c;制作通知方法【第四步】定义切入点表达式、配…...

编程日记 2023/5/3 18:23:06

学系统集成项目管理工程师（中项）系列15_质量管理

1. 质量&#xff08;Quality&#xff09;的定义 1.1. 反应实体满足主体明确和隐含需求的能力的特性总和 1.2. 明确需求是指在标准、规范、图样、技术要求、合同和其他文件中用户明确提出的要求与需要 1.3. 隐含需求是指用户和社会通过市场调研对实体的期望以及公认的、不必明…...

编程日记 2023/5/3 18:18:05

统计学习方法第四章——朴素贝叶斯法

x.1 前言 朴素贝叶斯法是基于贝叶斯定理与特征条件独立假设的分类方法。是通过给定training dataset学习联合概率分布的方法&#xff0c;是一种生成方法。 x.2 使用贝叶斯定理做分类 使用贝叶斯定理做分类&#xff0c;相比较于朴素贝叶斯即丢除特征条件独立假设这个条件。 …...

编程日记 2023/5/30 23:40:43

安装配置goaccess实现可视化并实时监控nginx的访问日志

一、业务需求 我们安装了nginx后，需要对nginx的访问情况进行监控（希望能够实时查看到访问nginx的情况），如下图所示： 二、goaccess的安装配置步骤 2.1、准备内容 需要先安装配置nginx或OpenResty - 安装 Linux环境对Nginx开源版源码下载、编译、安装、开机自启https://b…...

编程日记 2023/5/3 18:08:03

springboot第14集：MyBatis-CRUD讲解

注意点&#xff1a;增、删、改操作需要提交事务&#xff01; 为了规范操作&#xff0c;在SQL的配置文件中&#xff0c;我们尽量将Parameter参数和resultType都写上&#xff01; 编写Mapper接口类 import com.da.pojo.User; import java.util.List; public interface UserMapper…...

编程日记 2023/5/3 18:03:02

ES6新特性（1）

目录 一、字符串扩展 &#xff08;1&#xff09;字符串遍历器接口&#xff08;for...of...&#xff09; &#xff08;2&#xff09;模板字符串 二、字符串新增方法 &#xff08;1&#xff09;包含方法 &#xff08;2&#xff09;重复方法 &#xff08;3&#xff09;补全方…...

编程日记 2023/5/29 18:53:22

这就是二分查找？（C语言版）

大家好&#xff01;我又来了&#xff0c;哈哈~今天我要和大家分享一种神奇的算法——二分查找&#xff01;你可能会问&#xff0c;“二分查找有什么好玩的&#xff1f;”但在我看来它就像一场魔法表演&#xff0c;当你输入一个数&#xff0c;他会在一堆数中快速找到它的位置。找…...

编程日记 2023/6/1 10:46:05

操作系统之内存管理

连续分配 一、单一连续 直接为要运行的进程分配一个内存&#xff0c;只适合单任务&#xff0c;只能用于单对象、单任务&#xff0c;内存被分配为系统区和用户区&#xff0c;系统区在低地址&#xff0c;用户区是一个用户独享 二、等分分区 由于分配一个内存只能执行单任务&a…...

编程日记 2023/5/3 17:47:58

【Python | matplotlib】matplotlib.cm的理解以及举例说明

文章目录 一、模块介绍二、颜色举例 一、模块介绍 matplotlib.cm是Matplotlib中的一个模块&#xff0c;它提供了一组用于处理颜色映射&#xff08;colormap&#xff09;的函数和类。颜色映射是一种将数值映射到颜色的方法&#xff0c;常用于制作热力图、等值线图、散点图等。 …...

编程日记 2023/5/3 17:42:56

数据库单实例升级

一、单实例环境,全时长二个半钟多。详细图文说明到这下载 1、停止所有oracle相关进程。 Emctlstop dbconsole Isqlplusctl stop Lsnrctl stop sqlplus /nolog sql>conn /as sysdba Connectedtoanidleinstance. sql>shutdown 然后&#xff0c;冷备份下数据库cp…...

编程日记 2023/5/3 17:37:55

Photoshop如何使用选区之实例演示？

文章目录 0.引言1.利用快速选择工具抠图2.制作网店产品优惠券3.利用选区改变眼睛颜色4.抠取复杂的花束5.制作丁达尔光照效果6.利用选区调整图像局部颜色 0.引言 因科研等多场景需要进行绘图处理&#xff0c;笔者对PS进行了学习&#xff0c;本文通过《Photoshop2021入门教程》及…...

编程日记 2023/5/3 17:32:54

ThreadLocal的使用介绍和底层原理解析和开源框架的使用实例

文章目录 ThreadLocal的使用介绍和底层原理解析和开源框架的使用实例ThreadLocal简介ThreadLocal使用示例ThreadLocal原理解析Spring中ThreadLocal的应用小结ThreadLocal的使用步骤常见面试题案例解析(框架源码经典案例)案例实战 ThreadLocal的使用介绍和底层原理解析和开源框架…...

编程日记 2023/5/3 17:27:53

带你学c带你飞-P7取值范围

比特位 CPU能读懂的最小单元——比特位&#xff0c;bit&#xff0c;b 字节 内存机构的最小寻址单元——字节&#xff0c;Byte&#xff0c;B 1Byte8bit 进制 怎么算 注意&#xff1a;int默认是signed类型&#xff0c;signed类型第一位是符号位 符号位 存放signed类型的存…...

编程日记 2023/5/29 18:54:37

ramfs, rootfsinitramfs

什么是ramfs? ramfs是一个非常简单的文件系统&#xff0c;它将Linux的磁盘缓存机制(页面缓存和dentry缓存)导出为一个动态可调整大小的基于ram的文件系统。 Linux通常将所有文件缓存在内存中。从后备存储(通常是挂载文件系统的块设备)读取的数据页被保留下来&#xff0c;以防…...

编程日记 2023/5/3 17:17:50

十三届蓝桥杯研究生组国赛-最大公约数(线段树+二分)

十三届蓝桥杯研究生组国赛-最大公约数 1、问题描述2、解题思路2.1 解法一：暴力查询区间gcd(75%)2.2 解法二：线段树+二分法(AC)1、问题描述 问题描述 给定一个数组, 每次操作可以选择数组中任意两个相邻的元素 x , y x,y x,y...

编程日记 2023/5/29 20:37:12

数据结构——二叉树层序遍历

数据结构——二叉树层序遍历 107. 二叉树的层序遍历 II199. 二叉树的右视图思路&#xff1a; 637. 二叉树的层平均值 107. 二叉树的层序遍历 II 107. 二叉树的层序遍历 II 给你二叉树的根节点 root &#xff0c;返回其节点值 自底向上的层序遍历 。 &#xff08;即按从叶子节…...

编程日记 2023/5/31 9:01:22

【微机原理】8088/8086微处理器

目录 一、8088/8086的功能结构 1.总线接口部件&#xff08;BIU&#xff09; 2.执行部件&#xff08;EU&#xff09; 二、8088/8086的寄存器结构&#xff08;14个&#xff09; 溢出标志的概念 溢出和进位的区别 8086CPU是Intel系列的16位微处理器&#xff0c;他有16根数据…...

编程日记 2023/5/30 6:02:37

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/6/25 2:07:42

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/7/6 22:58:21

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2025/7/6 14:54:46

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/6/26 3:44:44

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/7/6 18:34:01

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/7/6 17:04:20

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2025/7/6 15:55:44

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2025/7/7 4:04:47

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/7/7 15:21:47

从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

编程新知 2025/7/7 14:21:38