首页html生日蛋糕烟花源码

html生日蛋糕烟花源码

时间: 2024-10-11 19:01:31 浏览: 37

HTML和CSS可以结合创建动态效果，如生日蛋糕烟花，但这通常涉及到JavaScript的动画和一些CSS3的特性。下面是一个简单的示例，展示如何通过HTML、CSS和JavaScript模拟烟花效果： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>生日蛋糕烟花</title> <style> .cake { width: 300px; height: 300px; border-radius: 50%; background-color: #f00; /* 蛋糕颜色 */ position: relative; } .candle { width: 20px; height: 60px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .sparkles { position: absolute; animation: fireworks 3s linear infinite; } @keyframes fireworks { 0% { opacity: 0; top: -30px; transform: translateY(0); } 50% { opacity: 1; top: 0; } 100% { opacity: 0; top: 30px; transform: translateY(-100%); } } </style> </head> <body> <div class="cake"> <div class="candle"></div> <div class="sparkles"></div> </div> <script> // JavaScript 动画随机生成火花位置 function addSparkle(parent) { var spark = document.createElement('div'); spark.className = 'sparkles'; parent.appendChild(spark); spark.style.left = Math.random() * 100 + '%'; spark.style.top = Math.random() * 100 + '%'; } // 创建随机数量的火花并添加到蛋糕上 for (var i = 0; i < 20; i++) { addSparkle(document.querySelector('.cake')); } </script> </body> </html> ``` 这个例子中，我们创建了一个红色背景的圆形蛋糕元素，中心有一个白色的蜡烛。然后在蛋糕上添加了动态的“火花”元素，通过CSS3的`@keyframes`动画来模拟烟花上升和消失的效果。

阅读全文