html5 文字转换烟花,HTML5交互式烟花（点击并保持）

CSS

语言：

CSSSCSS

确定

body {

display: flex;

margin: 0;

height: 100vh;

justify-content: center;

align-items: center;

font-size: 50px;

font-family: monospace;

background: #000;

color: #333;

/* filter: blur(2px) contrast(30); */

}

body:before {

content: 'Click and hold';

}

.explosion {

position: absolute;

top: 50%;

left: 50%;

width: 10px;

height: 10px;

}

.explosion div {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: crimson;

border-radius: 500px;

animation-fill-mode: forwards;

transform-origin: left center;

}

.explosion div:nth-child(1) {

animation: explode1 .3s;

transform: rotate(0) translate(0, 0);

}

.explosion div:nth-child(2) {

animation: explode2 .3s;

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

}

.explosion div:nth-child(3) {

animation: explode3 .3s;

transform: rotate(90deg) translate(0, 0);

}

.explosion div:nth-child(4) {

animation: explode4 .3s;

transform: rotate(135deg) translate(0, 0);

}

.explosion div:nth-child(5) {

animation: explode5 .3s;

transform: rotate(180deg) translate(0, 0);

}

.explosion div:nth-child(6) {

animation: explode6 .3s;

transform: rotate(225deg) translate(0, 0);

}

.explosion div:nth-child(7) {

animation: explode7 .3s;

transform: rotate(270deg) translate(0, 0);

}

.explosion div:nth-child(8) {

animation: explode8 .3s;

transform: rotate(315deg) translate(0, 0);

}

@keyframes explode1 {

0 {

width: 100%;

transform: rotate(0) translate(0, 0);

}

50% {

width: 400%;

transform: rotate(0) translate(0, 0);

}

100% {

width: 100%;

transform: rotate(0) translate(300%, 0);

}

}

@keyframes explode2 {

0 {

width: 100%;

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

}

50% {

width: 400%;

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

}

100% {

width: 100%;

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

}

}

@keyframes explode3 {

0 {

width: 100%;

transform: rotate(90deg) translate(0, 0);

}

50% {

width: 400%;

transform: rotate(90deg) translate(0, 0);

}

100% {

width: 100%;

transform: rotate(90deg) translate(300%, 0);

}

}

@keyframes explode4 {

0 {

width: 100%;

transform: rotate(135deg) translate(0, 0);

}

50% {

width: 400%;

transform: rotate(135deg) translate(0, 0);

}

100% {

width: 100%;

transform: rotate(135deg) translate(300%, 0);

}

}

@keyframes explode5 {

0 {

width: 100%;

transform: rotate(180deg) translate(0, 0);

}

50% {

width: 400%;

transform: rotate(180deg) translate(0, 0);

}

100% {

width: 100%;

transform: rotate(180deg) translate(300%, 0);

}

}

@keyframes explode6 {

0 {

width: 100%;

transform: rotate(225deg) translate(0, 0);

}

50% {

width: 400%;

transform: rotate(225deg) translate(0, 0);

}

100% {

width: 100%;

transform: rotate(225deg) translate(300%, 0);

}

}

@keyframes explode7 {

0 {

width: 100%;

transform: rotate(270deg) translate(0, 0);

}

50% {

width: 400%;

transform: rotate(270deg) translate(0, 0);

}

100% {

width: 100%;

transform: rotate(270deg) translate(300%, 0);

}

}

@keyframes explode8 {

0 {

width: 100%;

transform: rotate(315deg) translate(0, 0);

}

50% {

width: 400%;

transform: rotate(315deg) translate(0, 0);

}

100% {

width: 100%;

transform: rotate(315deg) translate(300%, 0);

}

}