css實現燒香效果

?效果：

代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>動態香燭效果</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><!-- 配置Tailwind自定義顏色和工具類 --><script>tailwind.config = {theme: {extend: {colors: {incense: {wood: '#e6c8a0',ash: '#d9d9d9',flame: '#ff6b35',glow: '#ffb74d',smoke: '#f0f0f0'}}}}}</script><style type="text/tailwindcss">@layer utilities {.incense-shadow {box-shadow: inset -2px 0 3px rgba(0,0,0,0.1), inset 2px 0 3px rgba(255,255,255,0.7);}.flame-animation {animation: flicker 1s infinite alternate;}.smoke-animation {animation: rise 4s infinite linear;}}@keyframes flicker {0% { transform: scale(1, 1); opacity: 0.9; }50% { transform: scale(1.1, 1.2); opacity: 1; }100% { transform: scale(0.9, 1); opacity: 0.85; }}@keyframes rise {0% { transform: translateY(0) scale(0.8); opacity: 0.6; }50% { transform: translateY(-20px) scale(1); opacity: 0.3; }100% { transform: translateY(-40px) scale(1.2); opacity: 0; }}</style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4"><div class="text-center"><h1 class="text-3xl font-bold mb-8 text-gray-800">動態香燭效果</h1><!-- 香燭容器 --><div class="relative h-[400px] flex justify-center items-end mb-12"><!-- 香爐 --><div class="w-24 h-8 bg-gray-300 rounded-full mb-1 shadow-md flex items-center justify-center"><div class="w-16 h-1 bg-gray-400 rounded-full"></div></div><!-- 香燭主體 --><div id="incense-stick" class="absolute bottom-[40px] w-2 bg-incense-wood rounded-t-full incense-shadow transition-all duration-500 ease-out" style="height: 300px;"><!-- 香燭頂部燃燒部分 --><div class="w-full h-4 bg-incense-flame rounded-full flame-animation relative"><!-- 火星 --><div class="absolute -top-1 -right-1 w-2 h-2 bg-incense-glow rounded-full flame-animation"></div><!-- 煙霧 --><div class="smoke-container absolute -top-10 left-1/2 transform -translate-x-1/2 w-4 h-4"><div class="smoke smoke-animation absolute w-3 h-3 bg-incense-smoke rounded-full"></div><div class="smoke smoke-animation absolute w-4 h-4 bg-incense-smoke rounded-full" style="animation-delay: 1s; left: -2px;"></div><div class="smoke smoke-animation absolute w-2 h-2 bg-incense-smoke rounded-full" style="animation-delay: 2s; left: 2px;"></div></div></div><!-- 香燭紋理 --><div class="w-full h-full relative"><div class="absolute top-10 w-full h-1 bg-incense-ash/70"></div><div class="absolute top-40 w-full h-1 bg-incense-ash/50"></div><div class="absolute top-80 w-full h-1 bg-incense-ash/60"></div><div class="absolute top-130 w-full h-1 bg-incense-ash/40"></div><div class="absolute top-190 w-full h-1 bg-incense-ash/70"></div><div class="absolute top-250 w-full h-1 bg-incense-ash/50"></div></div></div></div><!-- 控制面板 --><div class="bg-white p-6 rounded-lg shadow-lg max-w-md mx-auto"><h2 class="text-xl font-semibold mb-4 text-gray-700">調整香的長度</h2><div class="mb-6"><label for="incense-length" class="block text-gray-600 mb-2">香長度: <span id="length-value">300</span>px</label><input type="range" id="incense-length" min="50" max="350" value="300" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-amber-600"></div><div class="flex gap-3 justify-center"><button id="shorten-btn" class="px-4 py-2 bg-amber-600 text-white rounded hover:bg-amber-700 transition"><i class="fa fa-fire mr-1"></i> 燃燒變短</button><button id="reset-btn" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition"><i class="fa fa-refresh mr-1"></i> 重置</button></div></div></div><script>// 獲取DOM元素const incenseStick = document.getElementById('incense-stick');const lengthSlider = document.getElementById('incense-length');const lengthValue = document.getElementById('length-value');const shortenBtn = document.getElementById('shorten-btn');const resetBtn = document.getElementById('reset-btn');// 初始長度let currentLength = 300;// 更新香的長度function updateIncenseLength(length) {if (length < 50) length = 50; // 最小長度限制if (length > 350) length = 350; // 最大長度限制currentLength = length;incenseStick.style.height = `${currentLength}px`;lengthValue.textContent = currentLength;lengthSlider.value = currentLength;}// 滑塊控制lengthSlider.addEventListener('input', (e) => {updateIncenseLength(parseInt(e.target.value));});// 燃燒變短按鈕shortenBtn.addEventListener('click', () => {// 每次點擊縮短30pxupdateIncenseLength(currentLength - 30);// 添加燃燒的視覺反饋incenseStick.classList.add('scale-95');setTimeout(() => {incenseStick.classList.remove('scale-95');}, 200);});// 重置按鈕resetBtn.addEventListener('click', () => {updateIncenseLength(300);});// 自動燃燒效果 - 每5秒自動縮短一點setInterval(() => {updateIncenseLength(currentLength - 5);}, 5000);</script>
</body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/89079.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/89079.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/89079.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！