canvas实现数字燃烧火焰交互动画效果代码

代码语言:html

所属分类:动画

代码描述:canvas实现数字燃烧火焰交互动画效果代码

代码标签: canvas 数字 燃烧 火焰 交互 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
/*
global
*/
*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

body {
    height: 100vh;
    overflow: hidden;
}

canvas {
    touch-action: none;
}
</style>

  
  
  
</head>

<body translate="no">
  <script>

    const imageSrc = 'data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0