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;

}

}

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

  1. html边框炫酷效果,6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose

    这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览 源码下载 使用方法 HTML ...

  2. 好看的照片效果html,9款超绚丽的HTML5 3D图片动画特效

    1.SVG玫瑰花盛开动画 SVG还是很强大的,我们之前也分享过很多利用SVG绘制出来的各种动画特效.比如超炫酷的SVG轮船行驶动画和HTML5 SVG圆形钢琴动画都是用SVG实现的超酷动画.今天我们要 ...

  3. html5添加flash动画效果,霸气的HTML5 7款无Flash HTML5动画特效

    本文作者html5tricks,转载请注明出处 以前我们想在网页上实现一些动画特效,第一选择肯定是Flash,但是现在 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟 ...

  4. 推荐10个很棒的 CSS3 开发工具

    CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.尽管如此,有几个工具可以在你使用 CSS3 制作网站的时候起到很好的帮助作用.在这篇文章 ...

  5. html5融合效果,7种炫酷HTML5 SVG液态水滴融合动画特效

    这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效.这些SVG动画特效使一些HTML元素,如菜单.分页按钮.APP.选择框等元素的过渡动画像几粒水滴一样融合分解,效果非常的酷. SVG ...

  6. html图片叠,很棒的CSS3图片堆叠效果

    使用 :before  :after伪元素,以便做一些有趣的效果与CSS.在这里,我要告诉你如何创建一个简单的'堆叠'看一些图片. 第一步 创建HTML代码 第二步 使用CSS .stack { po ...

  7. html照片墙效果,超酷CSS3相册照片墙动画特效

    这是一款使用CSS3 transform属性制作的炫酷相册照片墙动画特效.该照片墙特效将一组图片旋转打乱排放在屏幕中,鼠标滑过照片时,照片会动画旋转并现在在所有照片的最上方. 使用方法 HTML结构 ...

  8. css波纹波动效果,js+css3催眠波纹动画特效

    js代码 function getRandomNumber() { return Math.floor(Math.random() * 255); } function getBrightness(r ...

  9. css 霓虹灯转动效果,CSS3 文本霓虹灯闪烁特效

    CSS 语言: CSSSCSS 确定 @import url("http://fonts.googleapis.com/css?family=Nixie+One"); @impor ...

最新文章

  1. Java培训的学费标准是多少
  2. NFS网络文件共享存储服务器
  3. 组织与科目等维度构建
  4. apache访问日志
  5. oracle 空间数据处理,Oracle数据库空间数据的处理
  6. 高等数学上-赵立军-北京大学出版社-题解-练习2.5
  7. 时间频率科学数据管理控制与应用
  8. 计算机98k音乐,【土豆】handclap 98K 完整版
  9. python如何运行一个python程序_python如何运行？第一个python小程序示范
  10. java date sethours,如何替换不推荐使用的方法Date.setHours（int）？
  11. simulink入门
  12. 机器学习（六）—— 分类
  13. 无线串口服务器规模,无线串口服务器
  14. 如何实现网页中按钮的自动点击？
  15. python forward函数___call__、__init__和 forward三个函数在python中的调用方法
  16. Android近距离通信
  17. Druid middleManager如何获取task信息并启动Peon进程
  18. Web前端学习第六周
  19. 01 飞书开发-网页应用JSSDK鉴权流程
  20. Pytorch机器学习（三）——VOC数据集转换为YOLO数据集

热门文章

  1. Java 8中的instanceof运算符和访客模式替换
  2. 在Windows 7中设置Java开发环境
  3. Java陷阱：内部类中的字段访问
  4. Maven集成测试和Spring Restful Services
  5. JSF和“立即”属性–命令组件
  6. Java相当好的隐私（PGP）
  7. mysql add default_MySQL中create table DEFAULT 用法
  8. python的setting怎么找_Python的Django框架中settings文件的部署建议
  9. 英语中的开音节和闭音节
  10. javadoc - Java API 文档生成器（Windows版本）