个人网页上添加彩色烟花动态效果的背景特效HTML和CSS来实现

最新推荐文章于 2024-05-07 04:54:09 发布

亲测源码模板

最新推荐文章于 2024-05-07 04:54:09 发布

阅读量402

点赞数 8

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_42234082/article/details/136733941

版权

<!DOCTYPE html>
<html>
<head>
<style>
body {
    overflow: hidden;
}

.firework {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #FFF;
    border-radius: 50%;
    animation: firework 3s infinite;
}

@keyframes firework {
    0% {
        opacity: 1;
        transform: scale(1);
        background-color: #F00;
    }
    50% {
        opacity: 0;
        transform: scale(2);
        background-color: #0F0;
    }
    100% {
        opacity: 1;
        transform: scale(1);
        background-color: #00F;
    }
}
</style>
</head>
<body>
<script>
function createFirework() {
    var firework = document.createElement("div");
    firework.className = "firework";
    firework.style.left = Math.random() * window.innerWidth + "px";
    firework.style.top = Math.random() * window.innerHeight + "px";
    document.body.appendChild(firework);
    setTimeout(function() {
        firework.remove();
    }, 3000);
}

setInterval(createFirework, 500);
</script>
</body>
</html>

如果你想在个人网页上添加彩色烟花动态效果的背景特效，可以使用HTML和CSS来实现。上面是一个简单的示例代码

这段代码会在网页中创建多个彩色烟花元素，并以动画效果在页面中随机移动。每个烟花元素具有不同的颜色和大小变化。你可以将这段代码复制到一个HTML文件中，并在浏览器中打开，即可看到彩色烟花动态效果的背景特效。你也可以根据自己的需要进行修改和调整。

亲测源码模板

关注

8
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
个人网页上添加彩色烟花动态效果的背景特效HTML和CSS来实现

这段代码会在网页中创建多个彩色烟花元素，并以动画效果在页面中随机移动。每个烟花元素具有不同的颜色和大小变化。你可以将这段代码复制到一个HTML文件中，并在浏览器中打开，即可看到彩色烟花动态效果的背景特效。你也可以根据自己的需要进行修改和调整。如果你想在个人网页上添加彩色烟花动态效果的背景特效，可以使用HTML和CSS来实现。上面是一个简单的示例代码。
复制链接

扫一扫