粒子文字特效css,CSS粒子效果

最新推荐文章于 2024-02-05 11:42:40 发布
最新推荐文章于 2024-02-05 11:42:40 发布
阅读量257 收藏
点赞数
文章标签： 粒子文字特效css

css

body {

padding: 40px 0;

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

background-color: #fff;

}

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.hearts > .particle {

opacity: 0;

position: absolute;

background-color: #cc2a5d;

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

animation: hearts 3s ease-in infinite;

}

body .particletext.hearts > .particle:before, body .particletext.hearts > .particle:after {

position: absolute;

content: '';

border-radius: 100px;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

background-color: #cc2a5d;

}

body .particletext.hearts > .particle:before {

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

body .particletext.hearts > .particle:after {

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

transform: translateY(-50%);

}

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 hearts {

0% {

opacity: 0;

-webkit-transform: translate(0, 0%) rotate(45deg);

transform: translate(0, 0%) rotate(45deg);

}

20% {

opacity: 0.8;

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

transform: translate(0, -20%) rotate(45deg);

}

100% {

opacity: 0;

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

transform: translate(0, -1000%) rotate(45deg);

}

}

@keyframes hearts {

0% {

opacity: 0;

-webkit-transform: translate(0, 0%) rotate(45deg);

transform: translate(0, 0%) rotate(45deg);

}

20% {

opacity: 0.8;

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

transform: translate(0, -20%) rotate(45deg);

}

100% {

opacity: 0;

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

transform: translate(0, -1000%) rotate(45deg);

}

}

@-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;

}

}

weixin_39755952
关注
27.CSS粒子特效
粉丝们务必加入微信粉丝群
08-30 926
【代码】27.CSS粒子特效。
css html实现粒子特效,CSS实现粒子动态按钮效果
weixin_29435467的博客
06-04 2203
原文链接按钮(button)可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？通常这类效果第一反应可能就是借助 canvas 了，比如下面这个 案例效果就更加震撼了，当然 canvas 实现也有一定的门槛，而且实际使用起来也略微麻烦(所有 js 实现的通病)，这里尝试一下 CSS 的实现方式。生成粒子抛开 js 方案，还有 HTML 和 CSS...
纯css实现粒子效果
热门推荐
whqet
01-09 1万+
好久没有更新的CSS3演武场系列，半年前搁浅的一篇文章赋予新年新气象闪亮登场了，研究一下利用css（sass）实现粒子效果，主要使用box-shadow生成粒子，利用css3 animation和translateZ实现动画。
css粒子效果
Haines
11-23 1007
css粒子
CSS3 粒子效果
weixin_30270561的博客
08-14 429
css3粒子效果，粒子飘飞效果，觉得挺不错的效果。请注意，此为CSS3代码，IE浏览器看不到效果，请使用IE9或火狐浏览器，或Chrome浏览器。 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>接触角测定仪</t...
CSS-动效 纯css粒子动效 | 转圈圈 | 上下弹动
WangYan的博客
10-14 2581
粒子动效 旋转 弹动
纯css3炫酷粒子动画特效
12-13
**字体（Fonts）**文件夹可能包含了自定义字体或者图标字体，这些字体可能被用在粒子效果中，增强视觉表现。 **CSS**文件则包含了所有与粒子动画相关的样式规则，包括粒子的大小、颜色、透明度变化、动画速度等。...
宇宙空间粒子CSS3动画特效
07-24
宇宙空间粒子CSS3动画特效是一种基于CSS3技术的创新视觉效果，它利用了CSS3的动画属性和特性来创建出仿佛置身于星辰大海般的粒子流动景象。这种特效为网页设计增添了深度和动态感，使用户在浏览网页时能感受到一种...
CSS文本粒子动画特效之爱心粒子文字特效-Canvas
最新发布
05-28
图源网络，侵删。 爱心粒子，可用于制作css粒子动画
CSS3发光粒子背景动画特效
04-25
综上所述，"CSS3发光粒子背景动画特效"结合了CSS3动画技术、JavaScript编程以及色彩设计，实现了网页背景的动态粒子效果。这种特效不仅提升了网页的视觉吸引力，也为开发者提供了发挥创意的空间，可以根据不同的项目...
html+css+js实现梦幻粒子飘落的特效
12-03
用200多行的代码实现梦幻粒子随机飘落特效，非常的唯美，也适合做动态桌面壁纸，适合新手学习js。也快项目引入。
particletext:设置用户输入的动画。 然后可以通过移动滑块来改变粒子效果，直到一切都变得令人满意为止
05-19
粒子文本 设置用户输入的动画。 然后可以通过移动滑块，直到一切都按其喜好来更改粒子效果。
css html实现粒子特效,CSS粒子效果
weixin_42165490的博客
06-04 1360
cssbody {padding: 40px 0;font-family: 'bebas', sans-serif;background-color: #3ecbff;}body .textcontainer {padding: 40px 0;text-align: center;}body .particletext {text-align: center;font-size: 48px;pos...
纯css粒子发散效果
c_qianxia5040的博客
09-27 1107
效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style&
使用HTML、CSS和JavaScript来创建一个粒子效果，粒子会跟随鼠标点击位置生成
日常笔记/总结/系列知识梳理
02-05 2078
JavaScript最初是为了在网页上添加简单的交互功能而创建的，但随着时间的推移，它已经发展成为一种功能强大且广泛使用的语言。CSS与HTML结合使用，用于控制网页中的布局、颜色、字体、大小、边距等方面的样式。JavaScript是一种功能强大且灵活的编程语言，用于为网页添加交互和动态性，并且已经成为Web开发的基础之一。这只是HTML的一些基本概念，HTML有很多其他的标签和功能，可以根据需要进一步学习和掌握。这些只是CSS的一些基本概念，CSS还有更多的属性和功能，可以根据需要进一步学习和掌握。
html、css、js粒子特效——前端
u013430418的博客
07-15 2857
粒子动效
html文字粒子效果简陋,5个很棒的CSS3文本粒子动画特效
weixin_39849153的博客
06-07 743
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: relativ...
使用HTML+CSS+JS 实现粒子动画
qq_32232407的博客
04-07 2381
使用 html + css + js ，就可以写出简单的粒子动画
ParticleTextView
xiayu98020214的专栏
05-18 736
ParticleTextView 核心思想，还是比较巧妙的。怎么识别一副图片中字的每个像素的位置呢？把字体设置成3399ff，遍历所有的像素点,如果颜色3399ff, 然后把这个点位置记录下来。 很浪费时间吧。     private void setParticles(){         int centerX = getWidth() / 2;         int ce
使用CSS3实现按钮点击粒子动画效果
我们使用`radial-gradient`函数来创建径向渐变的背景图像，用于实现粒子效果。同时，我们使用`position`属性来定位粒子元素，并使用`z-index`属性来控制粒子的层叠顺序。 在实现粒子动画效果时，我们需要注意以下几...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值