css html实现粒子特效,纯CSS实现的粒子发散动画效果

最新推荐文章于 2025-03-18 09:48:55 发布
最新推荐文章于 2025-03-18 09:48:55 发布
阅读量1.3k 收藏
点赞数
文章标签： css html实现粒子特效
本文展示了如何使用纯CSS创建一个3D粒子发散动画特效。通过CSS的`transform-style`, `perspective`, `translate3d`和`rotate`属性，配合`@keyframes`定义动画，实现不同颜色粒子从中心点向外扩散的效果。" 114971992,10539410,导弹拦截系统Java实现与解析,"['动态规划', '算法', 'Java', '数据结构']

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS

语言：

CSSSCSS

确定

html,

body,

.wrap {

height: 100%;

}

body {

background: black;

overflow: hidden;

}

.wrap {

transform-style: preserve-3d;

perspective: 300px;

}

.c {

position: absolute;

top: 50%;

left: 50%;

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

border-radius: 50%;

transform: translate3d(0, 0, -300px) scale(0.1);

}

.c:nth-child(1) {

background-color: #2b00ff;

animation: anim1 6s infinite ease-in-out;

animation-delay: -0.02s;

}

@keyframes anim1 {

33% {

transform: rotate(1.2deg) translate3d(54.03023px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(1.2deg) translate3d(54.03023px, 84.1471px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(1.2deg) translate3d(54.03023px, 168.2942px, 0) scale(0.1);

}

}

.c:nth-child(2) {

background-color: #2f00ff;

animation: anim2 6s infinite ease-in-out;

animation-delay: -0.04s;

}

@keyframes anim2 {

33% {

transform: rotate(2.4deg) translate3d(-41.61468px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(2.4deg) translate3d(-41.61468px, 90.92974px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(2.4deg) translate3d(-41.61468px, 181.85949px, 0) scale(0.1);

}

}

.c:nth-child(3) {

background-color: #3300ff;

animation: anim3 6s infinite ease-in-out;

animation-delay: -0.06s;

}

@keyframes anim3 {

33% {

transform: rotate(3.6deg) translate3d(-98.99925px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(3.6deg) translate3d(-98.99925px, 14.112px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(3.6deg) translate3d(-98.99925px, 28.224px, 0) scale(0.1);

}

}

.c:nth-child(4) {

background-color: #3700ff;

animation: anim4 6s infinite ease-in-out;

animation-delay: -0.08s;

}

@keyframes anim4 {

33% {

transform: rotate(4.8deg) translate3d(-65.36436px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(4.8deg) translate3d(-65.36436px, -75.68025px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(4.8deg) translate3d(-65.36436px, -151.3605px, 0) scale(0.1);

}

}

.c:nth-child(5) {

background-color: #3c00ff;

animation: anim5 6s infinite ease-in-out;

animation-delay: -0.1s;

}

@keyframes anim5 {

33% {

transform: rotate(6deg) translate3d(28.36622px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(6deg) translate3d(28.36622px, -95.89243px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(6deg) translate3d(28.36622px, -191.78485px, 0) scale(0.1);

}

}

.c:nth-child(6) {

background-color: #4000ff;

animation: anim6 6s infinite ease-in-out;

animation-delay: -0.12s;

}

@keyframes anim6 {

33% {

transform: rotate(7.2deg) translate3d(96.01703px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(7.2deg) translate3d(96.01703px, -27.94155px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(7.2deg) translate3d(96.01703px, -55.8831px, 0) scale(0.1);

}

}

.c:nth-child(7) {

background-color: #4400ff;

animation: anim7 6s infinite ease-in-out;

animation-delay: -0.14s;

}

@keyframes anim7 {

33% {

transform: rotate(8.4deg) translate3d(75.39023px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(8.4deg) translate3d(75.39023px, 65.69866px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(8.4deg) translate3d(75.39023px, 131.39732px, 0) scale(0.1);

}

}

.c:nth-child(8) {

background-color: #4800ff;

animation: anim8 6s infinite ease-in-out;

animation-delay: -0.16s;

}

@keyframes anim8 {

33% {

transform: rotate(9.6deg) translate3d(-14.55px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(9.6deg) translate3d(-14.55px, 98.93582px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(9.6deg) translate3d(-14.55px, 197.87165px, 0) scale(0.1);

}

}

.c:nth-child(9) {

background-color: #4d00ff;

animation: anim9 6s infinite ease-in-out;

animation-delay: -0.18s;

}

@keyframes anim9 {

33% {

transform: rotate(10.8deg) translate3d(-91.11303px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(10.8deg) translate3d(-91.11303px, 41.21185px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(10.8deg) translate3d(-91.11303px, 82.4237px, 0) scale(0.1);

}

}

.c:nth-child(10) {

background-color: #5100ff;

animation: anim10 6s infinite ease-in-out;

animation-delay: -0.2s;

}

@keyframes anim10 {

33% {

transform: rotate(12deg) translate3d(-83.90715px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(12deg) translate3d(-83.90715px, -54.40211px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(12deg) translate3d(-83.90715px, -108.80422px, 0) scale(0.1);

}

}

.c:nth-child(11) {

background-color: #5500ff;

animation: anim11 6s infinite ease-in-out;

animation-delay: -0.22s;

}

@keyframes anim11 {

33% {

transform: rotate(13.2deg) translate3d(0.44257px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(13.2deg) translate3d(0.44257px, -99.99902px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(13.2deg) translate3d(0.44257px, -199.99804px, 0) scale(0.1);

}

}

.c:nth-child(12) {

background-color: #5900ff;

animation: anim12 6s infinite ease-in-out;

animation-delay: -0.24s;

}

@keyframes anim12 {

33% {

transform: rotate(14.4deg) translate3d(84.3854px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(14.4deg) translate3d(84.3854px, -53.65729px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(14.4deg) translate3d(84.3854px, -107.31458px, 0) scale(0.1);

}

}

.c:nth-child(13) {

background-color: #5e00ff;

animation: anim13 6s infinite ease-in-out;

animation-delay: -0.26s;

}

@keyframes anim13 {

33% {

transform: rotate(15.6deg) translate3d(90.74468px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(15.6deg) translate3d(90.74468px, 42.0167px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(15.6deg) translate3d(90.74468px, 84.03341px, 0) scale(0.1);

}

}

.c:nth-child(14) {

background-color: #6200ff;

animation: anim14 6s infinite ease-in-out;

animation-delay: -0.28s;

}

@keyframes anim14 {

33% {

transform: rotate(16.8deg) translate3d(13.67372px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(16.8deg) translate3d(13.67372px, 99.06074px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(16.8deg) translate3d(13.67372px, 198.12147px, 0) scale(0.1);

}

}

.c:nth-child(15) {

background-color: #6600ff;

animation: anim15 6s infinite ease-in-out;

animation-delay: -0.3s;

}

@keyframes anim15 {

33% {

transform: rotate(18deg) translate3d(-75.96879px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(18deg) translate3d(-75.96879px, 65.02878px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(18deg) translate3d(-75.96879px, 130.05757px, 0) scale(0.1);

}

}

.c:nth-child(16) {

background-color: #6a00ff;

animation: anim16 6s infinite ease-in-out;

animation-delay: -0.32s;

}

@keyframes anim16 {

33% {

transform: rotate(19.2deg) translate3d(-95.76595px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(19.2deg) translate3d(-95.76595px, -28.79033px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(19.2deg) translate3d(-95.76595px, -57.58066px, 0) scale(0.1);

}

}

.c:nth-child(17) {

background-color: #6f00ff;

animation: anim17 6s infinite ease-in-out;

animation-delay: -0.34s;

}

@keyframes anim17 {

33% {

transform: rotate(20.4deg) translate3d(-27.51633px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(20.4deg) translate3d(-27.51633px, -96.13975px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(20.4deg) translate3d(-27.51633px, -192.2795px, 0) scale(0.1);

}

}

.c:nth-child(18) {

background-color: #7300ff;

animation: anim18 6s infinite ease-in-out;

animation-delay: -0.36s;

}

@keyframes anim18 {

33% {

transform: rotate(21.6deg) translate3d(66.03167px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(21.6deg) translate3d(66.03167px, -75.09872px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(21.6deg) translate3d(66.03167px, -150.19745px, 0) scale(0.1);

}

}

.c:nth-child(19) {

background-color: #7700ff;

animation: anim19 6s infinite ease-in-out;

animation-delay: -0.38s;

}

@keyframes anim19 {

33% {

transform: rotate(22.8deg) translate3d(98.87046px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(22.8deg) translate3d(98.87046px, 14.98772px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(22.8deg) translate3d(98.87046px, 29.97544px, 0) scale(0.1);

}

}

.c:nth-child(20) {

background-color: #7b00ff;

animation: anim20 6s infinite ease-in-out;

animation-delay: -0.4s;

}

@keyframes anim20 {

33% {

transform: rotate(24deg) translate3d(40.80821px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(24deg) translate3d(40.80821px, 91.29453px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(24deg) translate3d(40.80821px, 182.58905px, 0) scale(0.1);

}

}

.c:nth-child(21) {

background-color: #8000ff;

animation: anim21 6s infinite ease-in-out;

animation-delay: -0.42s;

}

@keyframes anim21 {

33% {

transform: rotate(25.2deg) translate3d(-54.77293px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(25.2deg) translate3d(-54.77293px, 83.66556px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(25.2deg) translate3d(-54.77293px, 167.33113px, 0) scale(0.1);

}

}

.c:nth-child(22) {

background-color: #2b00ff;

animation: anim22 6s infinite ease-in-out;

animation-delay: -0.44s;

}

@keyframes anim22 {

33% {

transform: rotate(26.4deg) translate3d(-99.99608px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(26.4deg) translate3d(-99.99608px, -0.88513px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(26.4deg) translate3d(-99.99608px, -1.77026px, 0) scale(0.1);

}

}

.c:nth-child(23) {

background-color: #2f00ff;

animation: anim23 6s infinite ease-in-out;

animation-delay: -0.46s;

}

@keyframes anim23 {

33% {

transform: rotate(27.6deg) translate3d(-53.2833px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(27.6deg) translate3d(-53.2833px, -84.62204px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(27.6deg) translate3d(-53.2833px, -169.24408px, 0) scale(0.1);

}

}

.c:nth-child(24) {

background-color: #3300ff;

animation: anim24 6s infinite ease-in-out;

animation-delay: -0.48s;

}

@keyframes anim24 {

33% {

transform: rotate(28.8deg) translate3d(42.4179px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(28.8deg) translate3d(42.4179px, -90.55784px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(28.8deg) translate3d(42.4179px, -181.11567px, 0) scale(0.1);

}

}

.c:nth-child(25) {

background-color: #3700ff;

animation: anim25 6s infinite ease-in-out;

animation-delay: -0.5s;

}

@keyframes anim25 {

33% {

transform: rotate(30deg) translate3d(99.12028px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(30deg) translate3d(99.12028px, -13.23518px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(30deg) translate3d(99.12028px, -26.47035px, 0) scale(0.1);

}

}

.c:nth-child(26) {

background-color: #3c00ff;

animation: anim26 6s infinite ease-in-out;

animation-delay: -0.52s;

}

@keyframes anim26 {

33% {

transform: rotate(31.2deg) translate3d(64.69193px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(31.2deg) translate3d(64.69193px, 76.25585px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(31.2deg) translate3d(64.69193px, 152.51169px, 0) scale(0.1);

}

}

.c:nth-child(27) {

background-color: #4000ff;

animation: anim27 6s infinite ease-in-out;

animation-delay: -0.54s;

}

@keyframes anim27 {

33% {

transform: rotate(32.4deg) translate3d(-29.21388px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(32.4deg) translate3d(-29.21388px, 95.63759px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(32.4deg) translate3d(-29.21388px, 191.27519px, 0) scale(0.1);

}

}

.c:nth-child(28) {

background-color: #4400ff;

animation: anim28 6s infinite ease-in-out;

animation-delay: -0.56s;

}

@keyframes anim28 {

33% {

transform: rotate(33.6deg) translate3d(-96.26059px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(33.6deg) translate3d(-96.26059px, 27.09058px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(33.6deg) translate3d(-96.26059px, 54.18116px, 0) scale(0.1);

}

}

.c:nth-child(29) {

background-color: #4800ff;

animation: anim29 6s infinite ease-in-out;

animation-delay: -0.58s;

}

@keyframes anim29 {

33% {

transform: rotate(34.8deg) translate3d(-74.80575px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(34.8deg) translate3d(-74.80575px, -66.36339px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(34.8deg) translate3d(-74.80575px, -132.72678px, 0) scale(0.1);

}

}

.c:nth-child(30) {

background-color: #4d00ff;

animation: anim30 6s infinite ease-in-out;

animation-delay: -0.6s;

}

@keyframes anim30 {

33% {

transform: rotate(36deg) translate3d(15.42514px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(36deg) translate3d(15.42514px, -98.80316px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(36deg) translate3d(15.42514px, -197.60632px, 0) scale(0.1);

}

}

.c:nth-child(31) {

background-color: #5100ff;

animation: anim31 6s infinite ease-in-out;

animation-delay: -0.62s;

}

@keyframes anim31 {

33% {

transform: rotate(37.2deg) translate3d(91.47424px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(37.2deg) translate3d(91.47424px, -40.40376px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(37.2deg) translate3d(91.47424px, -80.80753px, 0) scale(0.1);

}

}

.c:nth-child(32) {

background-color: #5500ff;

animation: anim32 6s infinite ease-in-out;

animation-delay: -0.64s;

}

@keyframes anim32 {

33% {

transform: rotate(38.4deg) translate3d(83.42234px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(38.4deg) translate3d(83.42234px, 55.14267px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(38.4deg) translate3d(83.42234px, 110.28534px, 0) scale(0.1);

}

}

.c:nth-child(33) {

background-color: #5900ff;

animation: anim33 6s infinite ease-in-out;

animation-delay: -0.66s;

}

@keyframes anim33 {

33% {

transform: rotate(39.6deg) translate3d(-1.32767px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(39.6deg) translate3d(-1.32767px, 99.99119px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(39.6deg) translate3d(-1.32767px, 199.98237px, 0) scale(0.1);

}

}

.c:nth-child(34) {

background-color: #5e00ff;

animation: anim34 6s infinite ease-in-out;

animation-delay: -0.68s;

}

@keyframes anim34 {

33% {

transform: rotate(40.8deg) translate3d(-84.85703px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(40.8deg) translate3d(-84.85703px, 52.90827px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(40.8deg) translate3d(-84.85703px, 105.81654px, 0) scale(0.1);

}

}

.c:nth-child(35) {

background-color: #6200ff;

animation: anim35 6s infinite ease-in-out;

animation-delay: -0.7s;

}

@keyframes anim35 {

33% {

transform: rotate(42deg) translate3d(-90.36922px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(42deg) translate3d(-90.36922px, -42.81827px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(42deg) translate3d(-90.36922px, -85.63653px, 0) scale(0.1);

}

}

.c:nth-child(36) {

background-color: #6600ff;

animation: anim36 6s infinite ease-in-out;

animation-delay: -0.72s;

}

@keyframes anim36 {

33% {

transform: rotate(43.2deg) translate3d(-12.79637px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(43.2deg) translate3d(-12.79637px, -99.17789px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(43.2deg) translate3d(-12.79637px, -198.35577px, 0) scale(0.1);

}

}

.c:nth-child(37) {

background-color: #6a00ff;

animation: anim37 6s infinite ease-in-out;

animation-delay: -0.74s;

}

@keyframes anim37 {

33% {

transform: rotate(44.4deg) translate3d(76.54141px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(44.4deg) translate3d(76.54141px, -64.35381px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(44.4deg) translate3d(76.54141px, -128.70763px, 0) scale(0.1);

}

}

.c:nth-child(38) {

background-color: #6f00ff;

animation: anim38 6s infinite ease-in-out;

animation-delay: -0.76s;

}

@keyframes anim38 {

33% {

transform: rotate(45.6deg) translate3d(95.50736px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(45.6deg) translate3d(95.50736px, 29.63686px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(45.6deg) translate3d(95.50736px, 59.27372px, 0) scale(0.1);

}

}

.c:nth-child(39) {

background-color: #7300ff;

animation: anim39 6s infinite ease-in-out;

animation-delay: -0.78s;

}

@keyframes anim39 {

33% {

transform: rotate(46.8deg) translate3d(26.66429px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(46.8deg) translate3d(26.66429px, 96.37954px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(46.8deg) translate3d(26.66429px, 192.75908px, 0) scale(0.1);

}

}

.c:nth-child(40) {

background-color: #7700ff;

animation: anim40 6s infinite ease-in-out;

animation-delay: -0.8s;

}

@keyframes anim40 {

33% {

transform: rotate(48deg) translate3d(-66.69381px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(48deg) translate3d(-66.69381px, 74.51132px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(48deg) translate3d(-66.69381px, 149.02263px, 0) scale(0.1);

}

}

.c:nth-child(41) {

background-color: #7b00ff;

animation: anim41 6s infinite ease-in-out;

animation-delay: -0.82s;

}

@keyframes anim41 {

33% {

transform: rotate(49.2deg) translate3d(-98.73393px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(49.2deg) translate3d(-98.73393px, -15.86227px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(49.2deg) translate3d(-98.73393px, -31.72453px, 0) scale(0.1);

}

}

.c:nth-child(42) {

background-color: #8000ff;

animation: anim42 6s infinite ease-in-out;

animation-delay: -0.84s;

}

@keyframes anim42 {

33% {

transform: rotate(50.4deg) translate3d(-39.99853px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(50.4deg) translate3d(-39.99853px, -91.65215px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(50.4deg) translate3d(-39.99853px, -183.30431px, 0) scale(0.1);

}

}

.c:nth-child(43) {

background-color: #2b00ff;

animation: anim43 6s infinite ease-in-out;

animation-delay: -0.86s;

}

@keyframes anim43 {

33% {

transform: rotate(51.6deg) translate3d(55.51133px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(51.6deg) translate3d(55.51133px, -83.17747px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(51.6deg) translate3d(55.51133px, -166.35495px, 0) scale(0.1);

}

}

.c:nth-child(44) {

background-color: #2f00ff;

animation: anim44 6s infinite ease-in-out;

animation-delay: -0.88s;

}

@keyframes anim44 {

33% {

transform: rotate(52.8deg) translate3d(99.98433px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(52.8deg) translate3d(99.98433px, 1.77019px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(52.8deg) translate3d(99.98433px, 3.54039px, 0) scale(0.1);

}

}

.c:nth-child(45) {

background-color: #3300ff;

animation: anim45 6s infinite ease-in-out;

animation-delay: -0.9s;

}

@keyframes anim45 {

33% {

transform: rotate(54deg) translate3d(52.5322px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(54deg) translate3d(52.5322px, 85.09035px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(54deg) translate3d(52.5322px, 170.1807px, 0) scale(0.1);

}

}

.c:nth-child(46) {

background-color: #3700ff;

animation: anim46 6s infinite ease-in-out;

animation-delay: -0.92s;

}

@keyframes anim46 {

33% {

transform: rotate(55.2deg) translate3d(-43.21779px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(55.2deg) translate3d(-43.21779px, 90.17883px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(55.2deg) translate3d(-43.21779px, 180.35767px, 0) scale(0.1);

}

}

.c:nth-child(47) {

background-color: #3c00ff;

animation: anim47 6s infinite ease-in-out;

animation-delay: -0.94s;

}

@keyframes anim47 {

33% {

transform: rotate(56.4deg) translate3d(-99.23355px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(56.4deg) translate3d(-99.23355px, 12.35731px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(56.4deg) translate3d(-99.23355px, 24.71462px, 0) scale(0.1);

}

}

.c:nth-child(48) {

background-color: #4000ff;

animation: anim48 6s infinite ease-in-out;

animation-delay: -0.96s;

}

@keyframes anim48 {

33% {

transform: rotate(57.6deg) translate3d(-64.01443px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(57.6deg) translate3d(-64.01443px, -76.82547px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(57.6deg) translate3d(-64.01443px, -153.65093px, 0) scale(0.1);

}

}

.c:nth-child(49) {

background-color: #4400ff;

animation: anim49 6s infinite ease-in-out;

animation-delay: -0.98s;

}

@keyframes anim49 {

33% {

transform: rotate(58.8deg) translate3d(30.05925px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(58.8deg) translate3d(30.05925px, -95.37527px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(58.8deg) translate3d(30.05925px, -190.75053px, 0) scale(0.1);

}

}

.c:nth-child(50) {

background-color: #4800ff;

animation: anim50 6s infinite ease-in-out;

animation-delay: -1s;

}

@keyframes anim50 {

33% {

transform: rotate(60deg) translate3d(96.4966px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(60deg) translate3d(96.4966px, -26.23749px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(60deg) translate3d(96.4966px, -52.47497px, 0) scale(0.1);

}

}

.c:nth-child(51) {

background-color: #4d00ff;

animation: anim51 6s infinite ease-in-out;

animation-delay: -1.02s;

}

@keyframes anim51 {

33% {

transform: rotate(61.2deg) translate3d(74.21542px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(61.2deg) translate3d(74.21542px, 67.02292px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(61.2deg) translate3d(74.21542px, 134.04584px, 0) scale(0.1);

}

}

.c:nth-child(52) {

background-color: #5100ff;

animation: anim52 6s infinite ease-in-out;

animation-delay: -1.04s;

}

@keyframes anim52 {

33% {

transform: rotate(62.4deg) translate3d(-16.29908px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(62.4deg) translate3d(-16.29908px, 98.66276px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(62.4deg) translate3d(-16.29908px, 197.32552px, 0) scale(0.1);

}

}

.c:nth-child(53) {

background-color: #5500ff;

animation: anim53 6s infinite ease-in-out;

animation-delay: -1.06s;

}

@keyframes anim53 {

33% {

transform: rotate(63.6deg) translate3d(-91.82828px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(63.6deg) translate3d(-91.82828px, 39.59252px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(63.6deg) translate3d(-91.82828px, 79.18503px, 0) scale(0.1);

}

}

.c:nth-child(54) {

background-color: #5900ff;

animation: anim54 6s infinite ease-in-out;

animation-delay: -1.08s;

}

@keyframes anim54 {

33% {

transform: rotate(64.8deg) translate3d(-82.93098px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(64.8deg) translate3d(-82.93098px, -55.8789px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(64.8deg) translate3d(-82.93098px, -111.75781px, 0) scale(0.1);

}

}

.c:nth-child(55) {

background-color: #5e00ff;

animation: anim55 6s infinite ease-in-out;

animation-delay: -1.1s;

}

@keyframes anim55 {

33% {

transform: rotate(66deg) translate3d(2.21268px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(66deg) translate3d(2.21268px, -99.97552px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(66deg) translate3d(2.21268px, -199.95103px, 0) scale(0.1);

}

}

.c:nth-child(56) {

background-color: #6200ff;

animation: anim56 6s infinite ease-in-out;

animation-delay: -1.12s;

}

@keyframes anim56 {

33% {

transform: rotate(67.2deg) translate3d(85.32201px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(67.2deg) translate3d(85.32201px, -52.1551px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(67.2deg) translate3d(85.32201px, -104.3102px, 0) scale(0.1);

}

}

.c:nth-child(57) {

background-color: #6600ff;

animation: anim57 6s infinite ease-in-out;

animation-delay: -1.14s;

}

@keyframes anim57 {

33% {

transform: rotate(68.4deg) translate3d(89.98668px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(68.4deg) translate3d(89.98668px, 43.61648px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(68.4deg) translate3d(89.98668px, 87.23295px, 0) scale(0.1);

}

}

.c:nth-child(58) {

background-color: #6a00ff;

animation: anim58 6s infinite ease-in-out;

animation-delay: -1.16s;

}

@keyframes anim58 {

33% {

transform: rotate(69.6deg) translate3d(11.91801px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(69.6deg) translate3d(11.91801px, 99.28726px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(69.6deg) translate3d(11.91801px, 198.57453px, 0) scale(0.1);

}

}

.c:nth-child(59) {

background-color: #6f00ff;

animation: anim59 6s infinite ease-in-out;

animation-delay: -1.18s;

}

@keyframes anim59 {

33% {

transform: rotate(70.8deg) translate3d(-77.10802px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform: rotate(70.8deg) translate3d(-77.10802px, 63.6738px, 0) scale(1);

opacity: 1;

}

100% {

transform: rotate(70.8deg) translate3d(-77.10802px, 127.3476px, 0) scale(0.1);

}

}

.c:nth-child(60) {

background-color: #7300ff;

animation: anim60 6s infinite ease-in-out;

animation-delay: -1.2s;

}

@keyframes anim60 {

33% {

transform: rotate(72deg) translate3d(-95.2413px, 0, 0) scale(1);

opacity: 1;

}

66% {

transform:

最低0.47元/天 解锁文章
小红时间
关注
227.纯CSS粒子背景动画
粉丝们务必加入微信粉丝群
09-11 1512
效果 (源码网盘地址在最后) 源码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>CSS Particles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs
纯CSS3彩色粒子散开特效特效代码
03-20
纯CSS3彩色粒子散开特效是一款css3基于animation实现的彩色粒子扩散散开动画特效。
纯css粒子发散效果
c_qianxia5040的博客
09-27 1240
效果图 <!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&
【css酷炫效果】纯CSS实现粒子旋转动画
最新发布
若释·飞语
03-18 419
【代码】【css酷炫效果】纯CSS实现粒子旋转动画。
CSS实现一个粒子动效的按钮
全栈前端精选
02-01 994
作者：XboxYanhttps://github.com/XboxYan/notes/issues/16按钮（button）可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的...
html--纯css粒子动画
stqer的博客
05-25 427
【代码】html--纯css粒子动画。
CSS-动效 纯css粒子动效 | 转圈圈 | 上下弹动
WangYan的博客
10-14 2818
粒子动效 旋转 弹动
css html实现粒子特效,CSS实现粒子动态按钮效果
weixin_29435467的博客
06-04 2338
原文链接按钮(button)可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？通常这类效果第一反应可能就是借助 canvas 了，比如下面这个 案例效果就更加震撼了，当然 canvas 实现也有一定的门槛，而且实际使用起来也略微麻烦(所有 js 实现的通病)，这里尝试一下 CSS 的实现方式。生成粒子抛开 js 方案，还有 HTML 和 CSS...
基于html5 canvas实现的跟随鼠标圆点粒子发散动画特效.zip
11-09
【标题】中的“基于html5 canvas实现的跟随鼠标圆点粒子发散动画特效”是一个前端开发项目，它利用HTML5的Canvas元素来创建一个交互式的视觉效果。Canvas是HTML5中用于绘制图形的一个强大功能，它允许开发者通过...
jQuery/CSS实现网页彩色粒子发散特效教程
在这个Canvas画布彩色粒子发散特效的上下文中，特效是指JavaScript和Canvas API配合使用的动画效果。这种特效可以应用于多个场景，如网页背景、加载动画、互动广告、游戏开场动画等。 知识点七：文件压缩与解压 ...
使用HTML+CSS+JS 实现粒子动画
qq_32232407的博客
04-07 2772
使用 html + css + js ，就可以写出简单的粒子动画
纯css3炫酷粒子动画特效
12-13
这是一款纯css3炫酷粒子动画特效。该特效使用多个div来制作光点粒子效果，并使用CSS3动画来制作光点粒子的上升动画，效果非常炫酷。
CSS文本粒子动画特效之爱心粒子文字特效-Canvas
misschengispink的博客
05-28 929
html+css+js，采用canvas实现爱心文本粒子动画特效，炫酷特效，素材和完整代码都有~快拿去表白~
使用CSS3实现一个随机粒子动画效果
王铁柱666的博客
02-15 246
创建一个随机粒子动画效果主要涉及到HTML、CSS和JavaScript。虽然CSS3提供了强大的动画功能，但为了实现粒子的随机运动和生成，我们还需要借助JavaScript。这个示例创建了一个包含随机粒子的动画。每个粒子都有随机的大小、位置和动画路径。你可以根据需要调整粒子的数量、大小范围、动画时间等参数。注意：CSS中的动画只是一个基本的线性移动。为了实现随机效果，我们需要在JavaScript中做更多的工作。
使用CSS3实现全屏颗粒的动画效果
2403_88969259的博客
12-22 383
使用CSS3和JavaScript，我们可以轻松实现全屏颗粒的动画效果。这种效果不仅美观，还能提升用户体验。希望本文能为您的网页设计提供灵感，欢迎您根据自己的需求进行修改和扩展。
css html实现粒子特效,CSS粒子效果
weixin_42165490的博客
06-04 1464
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...
纯css3动画---粒子效果按钮组件封装（vue）
foolishma的博客
01-10 820
前言：先声明一下，按钮并非原创，而是引用掘金大佬的一篇文章，突发奇想做了一个简单封装，如有侵权，欢迎来搞，本人立刻删文，如果对本文由什么新的想法或好的意见，欢迎留言。 作者：XboxYan 文章链接CSS实现一个粒子动效的按钮 子组件中： <template> <div> <button class="button" v-debounce="c...
CSS 3D绚烂粒子
liuhao9999的博客
07-06 401
CSS 3D绚烂粒子
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值