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

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

news 文章来源：https://blog.csdn.net/sunyctf/article/details/130443146 2024/11/20 13:25:51

❤️ 前言

第一款：妈妈您辛苦了！

一、效果图

二、代码实现

第二款：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

springboot第12集：DAO功能代码

在Spring Boot中，DAO是数据访问对象的缩写，它是一种设计模式用于提供对数据库操作的抽象层。通过使用DAO模式，我们可以将数据操作与业务逻辑分离，并提供一个单独的接口来执行所有的数据库操作。在Spring Boot中，通常使…...

编程日记 2023/5/30 6:29:23

基于KZG多项式承诺方案的RLN

1. 引言 RLN——Rate-Limiting Nullifier为PSE团队主导的项目，源自： Barry White Hat 2019年博客 Semaphore RLN, rate limiting nullifier for spam prevention in anonymous p2p setting RLN（Rate-Limiting Nullifier）是一种…...

编程日记 2023/5/30 7:24:07

《站在巨人的肩膀上学习Java》

Java从诞生距今已经有28年了，在这段时间里，随着Java版本的不断迭代，Java新特性的不断出现，使得Java被使用的越来越广泛。在工程界Java语言一直是大家最喜欢的语言之一，Java一直排行在编程语言热门程度的前3名。可想而…...

编程日记 2023/5/30 8:35:09

敏捷ACP.敏捷估计与规划.Mike Cohn.

第一部分传统规划失败的原因 vs 敏捷规划有效的原因传统的项目规划方式往往会让我们失望。要回答-一个新产品的范围/进度/资源的组合问题，传统规划过程不一定会产生令人非常满意的答案和最终产品。以下- -些论据可以支持这个结论: ●大约2/3的项目会显著超…...

编程日记 2023/6/1 2:44:42

[创新工具和方法论]-01- DOE课程基础知识

文章目录 1.DOE实验设计的介绍1.1 什么是实验设计DOE?1.2 DOE的优势有哪些?1.3 如何开展DoE研究？步骤 2.DOE实验培训3.数据分析步骤4.实验的随机化5.偏差6.R方相关系数假设检验 7.三因子二水平全因子设计 1.DOE实验设计的介绍实验设计是一种安排实验和分析实验数…...

编程日记 2023/5/30 6:52:47

LeetCode-1033. 移动石子直到连续

题目链接 LeetCode-1033. 移动石子直到连续题目描述题解题解一（Java） 作者：仲景这题目挺难懂的，得画画图才能更好的理解这也是LeetCode的尿性，习惯了，非得整这种别人看不懂的鸟语你可以这样理解&a…...

编程日记 2023/5/30 8:03:49

JVM调优入门指南：掌握步骤、参数和场景

前言作为Java开发者，我们经常需要优化应用的性能，其中JVM调优是非常重要的一部分。在本文中，我们将介绍JVM调优的一般步骤和方法，了解JVM调优参数，如堆大小、新生代比例、GC算法等参数的作用和配置方式，并…...

编程日记 2023/5/30 9:19:50

基于JSP+MySQL的跳蚤市场网站设计与开发

摘要在当今社会，网络信息已经不是什么很陌生的词汇，每天都在这个信息时代里生活着并且享受着它带来的与众不同。网络购物可以说是飞速发展的，这种购物方式逐渐的影响着人们的衣食住行。所以利用计算机实现跳蚤市场网站设计与开发势在必行。本网站是一个校园的跳蚤市场网…...

编程日记 2023/5/30 15:25:44

内网穿透NPS和宝塔Nginx配合使用，开启SSL访问本地局域网网络

并非为了教学，仅供自己记录，方便下次用。所以内容不会刻意花时间写的很细节详细。 1. 服务器NPS配置 NPS install安装后，配置文件会在其他位置，通过是 /etc/nps/nps.conf目录。找到进行修改，主要修改的是http_proxy_p…...

编程日记 2023/5/31 15:29:20

ToLua框架

ToLua 是一个用于在 Unity 中为 Lua 提供 C# 语言绑定的框架。通过 ToLua，你可以方便地将 C# 代码暴露给 Lua 脚本，并在 Lua 脚本中调用 C# 类、方法和属性。更新流程原理：使用AssetBundle进行资源的更新，而由于lua运行时才编…...

编程日记 2023/5/3 16:12:35

java 快速建站/新闻最新热点

文章目录一、概述二、开发步骤三、相关的类与接口四、操作例子1. 对数据库进行增/删/改时2. 对数据库进行查询时五、事务管理六、JDBC封装七、创建连接池进行优化一、概述 JAVASE规范：指定Java命令开发时基本规则，比如如何创建一个类，如何实…...

编程日记 2024/11/20 10:32:29

公司的网站推广怎么做/网站优化及推广方案

Android Camera Develop: process preview frames in real time efficiently概述本篇我们暂时不介绍像相机APP增加新功能，而是介绍如何处理相机预览帧数据。想必大多数人都对处理预览帧没有需求，因为相机只需要拿来拍照和录像就好了，实际上本…...

编程日记 2024/11/20 7:57:41