canvas实现数字燃烧火焰交互动画效果代码
代码语言:html
所属分类:动画
代码描述: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