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

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

news 2026/5/11 7:01:03

❤️ 前言

第一款：妈妈您辛苦了！

一、效果图

二、代码实现

第二款：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母亲节主题寄语文字动画特效

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

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

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

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

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

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

❓9. 回文数难度：简单给你一个整数 x ，如果 x 是一个回文整数，返回 true ；否则，返回 false 。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。例如…...

编程日记 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接口与实现类【第三步】定义通知类，制作通知方法【第四步】定义切入点表达式、配…...

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

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

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

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

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

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

编程日记 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讲解

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

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

ES6新特性（1）

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

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

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

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

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

操作系统之内存管理

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

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

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

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

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

数据库单实例升级

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

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

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

文章目录 0.引言1.利用快速选择工具抠图2.制作网店产品优惠券3.利用选区改变眼睛颜色4.抠取复杂的花束5.制作丁达尔光照效果6.利用选区调整图像局部颜色 0.引言因科研等多场景需要进行绘图处理，笔者对PS进行了学习，本文通过《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能读懂的最小单元——比特位，bit，b 字节内存机构的最小寻址单元——字节，Byte，B 1Byte8bit 进制怎么算注意：int默认是signed类型，signed类型第一位是符号位符号位存放signed类型的存…...

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

ramfs, rootfsinitramfs

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

编程日记 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. 二叉树的右视图思路： 637. 二叉树的层平均值 107. 二叉树的层序遍历 II 107. 二叉树的层序遍历 II 给你二叉树的根节点 root ，返回其节点值自底向上的层序遍历。 （即按从叶子节…...

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

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

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

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

这下，很多大学老师要睡不着了！

这两年，很多人都在说大学老师“稳定、体面、假期多”，可真把话筒递给高校老师本人，听到的往往不是轻松，而是另一种很闷的疲惫：睡不好，心里总悬着，白天上课，晚上改材料、写本子、赶论…...

编程新知 2026/5/11 6:56:41

2012年Accellera标准演进：SystemC、UCIS与AMS如何重塑EDA设计流程

1. 回顾2012：Accellera在电子设计自动化标准演进中的关键一年对于从事半导体设计，特别是系统级设计、验证和IP集成的工程师来说，2012年是一个值得标记的年份。那一年，行业正从2008年金融危机后的缓慢复苏中走出，移动计…...

编程新知 2026/5/11 6:14:54

[CAN BUS] 从开源到商用：USB-CAN适配器选型避坑指南与稳定性深度剖析

1. 为什么USB-CAN适配器选型这么重要？ 如果你正在开发汽车电子、工业控制或者机器人项目，大概率会用到CAN总线。作为嵌入式工程师，我最开始接触CAN总线时，天真地以为随便买个USB转CAN的工具就能搞定。结果在实际项目中踩了不少坑—…...

编程新知 2026/5/11 4:57:50

鸿蒙一气总论（八）

第八卷古今气运历史兴衰天道规律卷首引天地有气运，一气有盈亏； 万象有消长，人世有兴衰。天运为纲，地运为基，人运为果。朝代更迭、世道治乱、民心淳漓、文明起落， 从来不是偶然人事，不是强弱输…...

编程新知 2026/5/11 3:48:25

基于Godot引擎的模块化RTS游戏框架开发实战指南

1. 项目概述：当开放世界RTS遇上Godot引擎如果你和我一样，是个对即时战略游戏（RTS）有情怀，同时又对Godot引擎的轻量与高效念念不忘的开发者，那么看到“lampe-games/godot-open-rts”这个项目标题时&#xff…...

编程新知 2026/5/11 2:40:13

Armv9架构中STINDEX_EL1与SVCR寄存器详解

1. Arm架构中的STINDEX_EL1寄存器解析在Armv9架构中，STINDEX_EL1（Saved TIndex Register for EL1）是一个关键的系统寄存器，主要用于在异常进入时保存EL1的TIndex值。这个寄存器仅在实现了FEAT_S1POE2和FEAT_AA64特性时存在&#x…...

编程新知 2026/5/11 2:30:46

Flutter 路由导航完全指南

Flutter 路由导航完全指南引言路由导航是任何移动应用的核心功能之一。Flutter 提供了强大而灵活的路由系统，支持多种导航方式。本文将深入探讨 Flutter 路由导航的各种技巧和最佳实践。基础导航 Navigator.push Navigator.push(context,MaterialPageRoute(…...

编程新知 2026/5/11 0:16:36

3分钟快速解锁碧蓝航线全皮肤：Perseus游戏补丁终极指南

3分钟快速解锁碧蓝航线全皮肤：Perseus游戏补丁终极指南【免费下载链接】Perseus Azur Lane scripts patcher. 项目地址: https://gitcode.com/gh_mirrors/pers/Perseus 还在为碧蓝航线中那些精美皮肤无法体验而烦恼吗？Perseus原生库补丁为你提供…...

编程新知 2026/5/10 23:09:33