flame-special-effects
Version:
flame-special-effects - flame special effects.
63 lines (59 loc) • 2.39 kB
HTML
<!-- flame-special-effects - flame special effects.
Copyright (C) 2024-2025 Yu Hongbo, CNOCTAVE
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>. -->
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Flame Special Effects Demo</title>
<style>
#flame-container {
width: 500px;
height: 500px;
background: #111;
margin: 40px auto;
border-radius: 16px;
box-shadow: 0 0 32px #ff9800aa;
position: relative;
}
.controls {
text-align: center;
margin-top: 20px;
}
.controls label {
color: #fff;
margin-right: 8px;
}
body {
background: #222;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/rainbow-color-text@1.2.0/rainbow-color-text.css">
</head>
<body>
<div id="flame-container" style="position: relative; width: 90vw; height: 90vh;">
<div class="rainbow-color-text-autumn" style="position: absolute; display: flex; top:10vh; width: 30vw; left:30vw; justify-content: center; font-size: 5em;">炭火烤肉</div>
<div id="innerflame-container" style="position: absolute; top:30vh; left:30vw; width: 30vw; height: 50vh; background-color: #111;">
<img src="炭火烤肉.jpg" style="width: 100%; height: 100%; object-fit: cover;">
</div>
</div>
<!-- three.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
<!-- flame-special-effects.js -->
<script src="flame-special-effects.js"></script>
<script>
var flame = window.FlameSpecialEffects;
flame.init('flame-container');
flame.changeLevel(50);
</script>
</body>
</html>