html文字粒子效果简陋,5个很棒的CSS3文本粒子动画特效

CSS

语言：

CSSSCSS

确定

body {

padding: 40px 0;

font-family: 'bebas', sans-serif;

}

body .textcontainer {

padding: 40px 0;

text-align: center;

}

body .particletext {

text-align: center;

font-size: 48px;

position: relative;

}

body .particletext.bubbles > .particle {

opacity: 0;

position: absolute;

background-color: rgba(33, 150, 243, 0.5);

-webkit-animation: bubbles 3s ease-in infinite;

animation: bubbles 3s ease-in infinite;

border-radius: 100%;

}

body .particletext.lines > .particle {

position: absolute;

background-color: rgba(244, 67, 54, 0.5);

-webkit-animation: lines 3s linear infinite;

animation: lines 3s linear infinite;

}

body .particletext.confetti > .particle {

opacity: 0;

position: absolute;

-webkit-animation: confetti 3s ease-in infinite;

animation: confetti 3s ease-in infinite;

}

body .particletext.confetti > .particle.c1 {

background-color: rgba(76, 175, 80, 0.5);

}

body .particletext.confetti > .particle.c2 {

background-color: rgba(156, 39, 176, 0.5);

}

body .particletext.fire > .particle {

position: absolute;

background-color: rgba(255, 193, 7, 0.5);

border-radius: 40px;

border-top-right-radius: 0px;

-webkit-animation: fires 0.8s linear infinite;

animation: fires 0.8s linear infinite;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

opacity: 0;

}

body .particletext.fire > .particle:before {

position: absolute;

content: '';

top: 60%;

left: 40%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 50%;

height: 50%;

border-radius: 40px;

border-top-right-radius: 0px;

background-color: rgba(251, 140, 0, 0.5);

}

body .particletext.sunbeams > .particle {

position: absolute;

background-color: rgba(253, 216, 53, 0.5);

-webkit-animation: sunbeams 3s linear infinite;

animation: sunbeams 3s linear infinite;

}

@-webkit-keyframes bubbles {

0% {

opacity: 0;

}

20% {

opacity: 1;

-webkit-transform: translate(0, -20%);

transform: translate(0, -20%);

}

100% {

opacity: 0;

-webkit-transform: translate(0, -1000%);

transform: translate(0, -1000%);

}

}

@keyframes bubbles {

0% {

opacity: 0;

}

20% {

opacity: 1;

-webkit-transform: translate(0, -20%);

transform: translate(0, -20%);

}

100% {

opacity: 0;

-webkit-transform: translate(0, -1000%);

transform: translate(0, -1000%);

}

}

@-webkit-keyframes lines {

0%, 50%, 100% {

-webkit-transform: translateY(0%);

transform: translateY(0%);

}

25% {

-webkit-transform: translateY(100%);

transform: translateY(100%);

}

75% {

-webkit-transform: translateY(-100%);

transform: translateY(-100%);

}

}

@keyframes lines {

0%, 50%, 100% {

-webkit-transform: translateY(0%);

transform: translateY(0%);

}

25% {

-webkit-transform: translateY(100%);

transform: translateY(100%);

}

75% {

-webkit-transform: translateY(-100%);

transform: translateY(-100%);

}

}

@-webkit-keyframes confetti {

0% {

opacity: 0;

-webkit-transform: translateY(0%) rotate(0deg);

transform: translateY(0%) rotate(0deg);

}

10% {

opacity: 1;

}

35% {

-webkit-transform: translateY(-800%) rotate(270deg);

transform: translateY(-800%) rotate(270deg);

}

80% {

opacity: 1;

}

100% {

opacity: 0;

-webkit-transform: translateY(2000%) rotate(1440deg);

transform: translateY(2000%) rotate(1440deg);

}

}

@keyframes confetti {

0% {

opacity: 0;

-webkit-transform: translateY(0%) rotate(0deg);

transform: translateY(0%) rotate(0deg);

}

10% {

opacity: 1;

}

35% {

-webkit-transform: translateY(-800%) rotate(270deg);

transform: translateY(-800%) rotate(270deg);

}

80% {

opacity: 1;

}

100% {

opacity: 0;

-webkit-transform: translateY(2000%) rotate(1440deg);

transform: translateY(2000%) rotate(1440deg);

}

}

@-webkit-keyframes fires {

0% {

-webkit-transform: rotate(-70deg) translateY(0%);

transform: rotate(-70deg) translateY(0%);

}

25% {

-webkit-transform: rotate(-20deg) translateY(-5%);

transform: rotate(-20deg) translateY(-5%);

opacity: 1;

}

50% {

-webkit-transform: rotate(-70deg) translateY(-10%);

transform: rotate(-70deg) translateY(-10%);

}

75% {

-webkit-transform: rotate(-20deg) translateY(-20%);

transform: rotate(-20deg) translateY(-20%);

}

100% {

-webkit-transform: rotate(-70deg) translateY(-40%);

transform: rotate(-70deg) translateY(-40%);

opacity: 1;

}

}

@keyframes fires {

0% {

-webkit-transform: rotate(-70deg) translateY(0%);

transform: rotate(-70deg) translateY(0%);

}

25% {

-webkit-transform: rotate(-20deg) translateY(-5%);

transform: rotate(-20deg) translateY(-5%);

opacity: 1;

}

50% {

-webkit-transform: rotate(-70deg) translateY(-10%);

transform: rotate(-70deg) translateY(-10%);

}

75% {

-webkit-transform: rotate(-20deg) translateY(-20%);

transform: rotate(-20deg) translateY(-20%);

}

100% {

-webkit-transform: rotate(-70deg) translateY(-40%);

transform: rotate(-70deg) translateY(-40%);

opacity: 1;

}

}

@-webkit-keyframes sunbeams {

0% {

-webkit-transform: translateY(40%) rotate(0deg);

transform: translateY(40%) rotate(0deg);

}

50% {

-webkit-transform: translateY(-40%) rotate(180deg);

transform: translateY(-40%) rotate(180deg);

}

100% {

-webkit-transform: translateY(40%) rotate(360deg);

transform: translateY(40%) rotate(360deg);

}

0%,

14%,

17%,

43%,

53%,

71%,

80%,

94%,

100% {

opacity: 0;

}

6%,

15%,

24%,

28%,

48%,

55%,

78%,

82%,

99% {

opacity: 1;

}

}

@keyframes sunbeams {

0% {

-webkit-transform: translateY(40%) rotate(0deg);

transform: translateY(40%) rotate(0deg);

}

50% {

-webkit-transform: translateY(-40%) rotate(180deg);

transform: translateY(-40%) rotate(180deg);

}

100% {

-webkit-transform: translateY(40%) rotate(360deg);

transform: translateY(40%) rotate(360deg);

}

0%,

14%,

17%,

43%,

53%,

71%,

80%,

94%,

100% {

opacity: 0;

}

6%,

15%,

24%,

28%,

48%,

55%,

78%,

82%,

99% {

opacity: 1;

}

}

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

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

相关文章

最小生成树、最短路径树

最小生成树、最短路径树

一、最小生成树与最短路径树的区别 最小生成树能够保证整个拓扑图的所有路径之和最小，但不能保证任意两点之间是最短路径。 应用如网络部线，把所有的电脑(服务器？）都连起来用的网线(光纤？）最少&#xff0c…
阅读更多...
2021年春季学期期末统一考试 西方经济学（本） 试题

2021年春季学期期末统一考试 西方经济学（本） 试题

试卷代号： 1026 这里是引用 2021年7月 一、单项选择题（在下列各题的备选答案中选择一个正确的，并将其序号字母填入题后的括号里。每题2分，共30分） 1.其他因素保持不变，只是某种商品的价格下降，则…
阅读更多...
国开文学英语赏析 2021春（2021年7月）

国开文学英语赏析 2021春（2021年7月）

试卷代号： 1062 2021年7月 注意事项 一、将你的学号、姓名及分校（工作站）名称填写在答题纸的规定栏内。考试结束后，把试卷和答题纸放在桌上。试卷和答题纸均不得带出考场。监考人收完考卷和答题纸后才可离开考场。 二、仔细读懂题…
阅读更多...
mpvue v-html解决方案,mpvue开发小程序所遇问题及h5转化方案

mpvue v-html解决方案,mpvue开发小程序所遇问题及h5转化方案

wx这个对象我们可以结合router和vux封装一下其中的navigateTo，redirectTo等路由及模态框和toast，并在webpack.base.conf配置wx指向该文件,这样我们就能直接使用wx这个对象面的方法不用修改/*webpack.base.conf*/resolve: {extensions: [.js, .vue, .json…
阅读更多...
无线发射功率与增益

无线发射功率与增益

1. 无线发射功率与增益 无线电发射机输出的射频信号，通过馈线（电缆）输送到天线，由天线以电磁波形式辐射出去。电磁波到达接收地点后，由天线接收下来（仅仅接收很小很小一部分功率），并…
阅读更多...
web 项目集成福昕_项目学生：Web服务集成

web 项目集成福昕_项目学生：Web服务集成

web 项目集成福昕这是Project Student的一部分。 其他帖子包括带有Jersey的 Web服务 客户端，带有Jersey的 Web服务服务器 ， 业务层 ， 具有Spring数据的持久性和分片集成测试数据 。 早先，我们成功地针对持久性/业务层&#xff08…
阅读更多...
151205 财务管理原理作业（笔试题型）

151205 财务管理原理作业（笔试题型）

《财务管理原理（专升本）》作业 一、单项选择题 1、融资租赁又称财务租赁，有时也称资本租赁。下列（ ）情形不属于融资租赁范围。 A、根据协议，企业将某项资产卖给出租人，再将其租回使用 B…
阅读更多...
分享百度文库提交成功的八大因素

分享百度文库提交成功的八大因素

我做百度文库已经有两个多月了，今天也是第二次以博文的形式跟大家分享经验，应该比第一次会更成熟一些，但是个人的能力毕竟是有限的，另外我的SEO优化经验也不多，可能提出的观点也不是很全面，还希望大家多包涵…
阅读更多...
html表单自动提交表单提交表单数据类型,表单

html表单自动提交表单提交表单数据类型,表单

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上…
阅读更多...
实施白色标签

实施白色标签

有时（根据我的经验，很多时候）您需要为应用程序添加白色标签。 您通常可以以SaaS方式运行它，但是一些重要的或高知名度的客户端可能想要专用的部署或本地部署，或者只是在云部署中“自己的一角”。 白色标签通常包括不同…
阅读更多...
卫星链路

卫星链路

卫星通信系统中，信息传输中，一条传输链路包括发端地球站、上行链路、卫星转发器、下行链路、收端地球站。按照空间分布可以分为星地链路和星间链路。影响其通信性能的因素主要有：发射端的发射功率与天线增益、传输过程中的损耗、传输过程中所…
阅读更多...
国家开放大学人文英语4

国家开放大学人文英语4

客观题 交际用语（共5题，共10分） 1. — Do you think cosmetic surgery is more popular with women? — ________________ . A Yes, women are more popular than men B Yes, absolutely. Because women pay more attention to beauty…
阅读更多...
微型计算机主机的主要组成部件是,微型计算机主机的主要组成部分有

微型计算机主机的主要组成部件是,微型计算机主机的主要组成部分有

大家好，我是时间财富网智能客服时间君，上述问题将由我为大家进行解答。微型计算机的主机由CPU和内存储器组成， CPU相当于微型计算机的大脑，包括控制器和运算器，内存储器分为RAM和ROM。分别对应微型计算机的运行空间和存…
阅读更多...
定义Definition、公理、定理、推论、命题和引理的区别

定义Definition、公理、定理、推论、命题和引理的区别

WHAT IS THE DIFFERENCE BETWEEN A THEOREM(定理), LEMMA（引理）,AND A COROLLARY（推论）? PROF. DAVE RICHESON (1) Definition（定义） 对某个数学概念\术语（符号、表达）的解释。 A…
阅读更多...
[渝粤题库]陕西师范大学《金融机构管理》作业

[渝粤题库]陕西师范大学《金融机构管理》作业

《金融机构管理》作业 一 、选择题 1．在我国的金融机构中，下列哪一项是政策性银行？（ ） A.交通银行 B.中国银行 C.中国农业发展银行 D.中国农业银行 2．商业银行最主要的资金来源是&…
阅读更多...
计算机网络组成包括哪些内容,计算机网络系统的组成

计算机网络组成包括哪些内容,计算机网络系统的组成

互联网时代已经到来了，小编为你科普一下网络相关基础知识《计算机网络系统的组成》，让你更快融入互联网时代。计算机网络系统是通信子网和资源子网组成的。而网络软件系统和网络硬件系统是网络系统赖以存在的基础。在网络系统中，硬件对网络的…
阅读更多...
正定和半正定

正定和半正定

在众多的机器学习模型中，线性代数的身影无处不在，当然，我们也会时常碰到线性代数中的正定矩阵和半正定矩阵。例如，多元正态分布的协方差矩阵要求是半正定的。 ------------------------------------------ 1. 基本的定义 正定和…
阅读更多...
[渝粤题库]陕西师范大学《幼儿园社会教育》作业

[渝粤题库]陕西师范大学《幼儿园社会教育》作业

《幼儿园社会教育》作业 一、单选题 1.谁创立了发生认识论并提出了儿童认知发展阶段论（） Ａ．班杜拉　 Ｂ．弗洛伊德 Ｃ．皮亚杰Ｄ．柯尔伯格 2.下列不属于…
阅读更多...
Java 8 map（），flatMap（）示例

Java 8 map（），flatMap（）示例

使用map（）方法 编程时，很常见的是处理数据以便从对象集合中收集一些信息。 假设我们要从特定公司的所有员工中查找城市。 我们的员工班级如下。 public class Employee {private String name;private Integer age;private String city;priv…
阅读更多...
[渝粤题库]陕西师范大学《幼儿园科学教育》作业

[渝粤题库]陕西师范大学《幼儿园科学教育》作业

《幼儿园科学教育》作业 一、填空题 1．科学教育中常采用的观察方法是 ① 、 ② 、 ③ 。 2．幼儿劳动的种类包括 ① 、 ② 、 ③ 、 ④ 。 3．在幼儿科学教育中，情感的目标非常广泛…
阅读更多...
最新文章

Copyright @ 2022~2023