使用css画一根燃烧中的蜡烛 

<!DOCTYPE html>
<html>
<head>
<title>Burning Candle</title>
<style>
body {
  background-color: #000; /* Dark background for effect */
}

.candle {
  position: relative;
  width: 50px;
  height: 150px;
  background-color: #fff; /* Candle color */
  margin: 50px auto;
  border-radius: 10px 10px 0 0; /* Rounded top */
  box-shadow: 0px 5px 15px rgba(255, 140, 0, 0.5); /* Candle glow */
}

.flame {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(255, 165, 0, 1) 0%, rgba(255, 69, 0, 1) 40%, rgba(255, 0, 0, 0) 100%);
  border-radius: 50% 50% 20% 20%;
  animation: flicker 1s infinite;
  box-shadow: 0px 0px 10px rgba(255, 69, 0, 0.8); /* Flame glow */
}

.wick {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 10px;
  background-color: #333; /* Wick color */
  border-radius: 2px;
}


.melted-wax {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 20px;
  background-color: rgba(255, 255, 0, 0.5); /* Melted wax color */
  border-radius: 0 0 10px 10px;
  z-index: -1; /* Place behind the candle body */
}



@keyframes flicker {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-55%) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.9;
  }
}
</style>
</head>
<body>

<div class="candle">
  <div class="melted-wax"></div>
  <div class="flame"></div>
  <div class="wick"></div>
</div>

</body>
</html>

Key improvements and explanations:

  • Melted Wax: Added a melted-wax div to simulate melted wax at the top of the candle. The z-index: -1 ensures it's behind the main candle body. Adjusted the color and shape for realism.
  • Improved Flame: Used a radial-gradient for a more natural flame appearance, going from orange-yellow in the center to red and then transparent at the edges. The flickering animation is smoother and more realistic. Added a glow with box-shadow.
  • Wick: Made the wick darker and more subtle.
  • Candle Glow: Added a subtle glow around the candle using box-shadow.
  • Dark Background: Set the background color to black to enhance the candle's visual effect.
  • Rounded Top: Added border-radius to round the top of the candle.
  • Centering: Used margin: 50px auto to center the candle horizontally on the page.

This improved version provides a more convincing and visually appealing burning candle effect. You can further customize the colors, sizes, and animation speed to achieve your desired look.

posted @ 2024-12-05 09:13  王铁柱6  阅读(25)  评论(0)    收藏  举报