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文本粒子动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。