html--生日蜡烛 作者:System 时间:2024年08月19日 分类:所有,html 字数:905 warning: 这篇文章距离上次修改已过262天,其中的内容可能已经有所变动。 生日蜡烛可以通过HTML和CSS来实现。以下是一个简单的示例代码:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Birthday Candle</title> <style> .candle { width: 50px; height: 150px; background-color: red; margin: 50px; border-radius: 50px 50px 0 0; position: relative; animation: candle-burn 5s linear infinite; } .candle::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; background-color: black; border-radius: 50%; } @keyframes candle-burn { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="candle"></div> </body> </html>HTMLCopy这段代码创建了一个旋转的生日蜡烛图形,通过CSS动画candle-burn实现了燃烧的效果。
评论已关闭