CSS打造动态火焰墙

紫微前端

于 2022-07-06 14:37:25 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件文章标签：大数据

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125639319

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文介绍了如何利用CSS实现一个动态的火焰墙效果，通过CSS动画技术和特定的选择器，创建出生动逼真的火焰燃烧动画，为网页增添视觉吸引力。

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

代码：

<canvas class="fire"></canvas>

<style>
    *,
    *::before,
    *::after {
        padding: 0;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    body {
        background-color: #000;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .fire {
        width: 100%;
    }
</style>
<script>
    const cWidth = 120;
    const cHeight = 30;

    const c = document.querySelector('.fire');
    c.width = cWidth;
    c.height = cHeight;

    const ctx = c.getContext("2d");

    const grd = ctx.cr

了解本专栏