优秀的编程知识分享平台

网站首页 > 技术文章 正文

用HTML写出绽放的烟花(怎么用html做出烟花)

nanyue 2024-07-31 12:19:27 技术文章 9 ℃

以下是一个使用HTML和CSS实现绽放的烟花的示例代码:

```html

<!DOCTYPE html>

<html>

<head>

<title>绽放的烟花</title>

<style>

.firework {

position: relative;

width: 100px;

height: 100px;

background-color: #ff0000;

border-radius: 50%;

animation: explode 1s ease-in-out infinite;

}

@keyframes explode {

0% {

transform: scale(1);

opacity: 1;

}

50% {

transform: scale(1.5);

opacity: 0.5;

}

100% {

transform: scale(1);

opacity: 1;

}

}

</style>

</head>

<body>

<div class="firework"></div>

</body>

</html>

```

这段代码创建了一个`div`元素,并将其样式设置为一个圆形的红色烟花。使用CSS的动画效果,通过`@keyframes`定义了一个名为`explode`的动画,使烟花在1秒钟内以缩放的方式产生绽放效果。动画会无限循环播放,直到页面关闭。

你可以将上述代码保存为一个HTML文件,并在浏览器中打开,就能看到绽放的烟花效果了。希望你喜欢!

Tags:

最近发表
标签列表