css字压,CSS3 挤压爆破的文字动画-优快云博客

本文介绍了一个使用CSS实现的爆炸动画效果。通过定义关键帧动画，实现了数字从1逐渐增大到10的效果，并伴随字体大小的变化。同时，文章还展示了如何应用动画属性来使“.bomb”类元素产生“BOOM!”的文字显示。

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

CSS

语言：

CSSSCSS

确定

@-webkit-keyframes explosion {

10% {

content: "1";

color: white;

font-size: 20px;

}

20% {

content: "2";

color: white;

font-size: 40px;

}

30% {

content: "3";

color: white;

font-size: 60px;

}

40% {

content: "4";

color: white;

font-size: 80px;

}

50% {

content: "5";

color: white;

font-size: 100px;

}

60% {

content: "6";

color: white;

font-size: 120px;

}

70% {

content: "7";

color: white;

font-size: 140px;

}

80% {

content: "8";

color: white;

font-size: 160px;

}

90% {

content: "9";

color: white;

font-size: 180px;

}

100% {

content: "10";

color: white;

font-size: 200px;

}

@keyframes explosion {

10% {

content: "1";

color: white;

font-size: 20px;

}

20% {

content: "2";

color: white;

font-size: 40px;

}

30% {

content: "3";

color: white;

font-size: 60px;

}

40% {

content: "4";

color: white;

font-size: 80px;

}

50% {

content: "5";

color: white;

font-size: 100px;

}

60% {

content: "6";

color: white;

font-size: 120px;

}

70% {

content: "7";

color: white;

font-size: 140px;

}

80% {

content: "8";

color: white;

font-size: 160px;

}

90% {

content: "9";

color: white;

font-size: 180px;

}

100% {

content: "10";

color: white;

font-size: 200px;

}

.bomb {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

.bomb:after {

font-size: 300px;

content: "BOOM!";

display: block;

color: red;

text-align: center;

-webkit-animation: explosion 7s linear infinite reverse;

animation: explosion 7s linear infinite reverse;

-webkit-transition: color 0.1s ease;

transition: color 0.1s ease;

}

html,

body {

height: 100%;

}

body {

font-family: "fira-sans-2", Helvetica, sans-serif;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

background-color: #333;

font-weight: bold;

}