用css画一个太阳

.sun {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, yellow, orange);
  box-shadow: 0 0 20px yellow; /* Add a glow */
  position: relative; /* For positioning rays */
  animation: rotate 10s linear infinite; /* Optional: Animate rotation */
}

.ray {
  position: absolute;
  background: yellow;
  width: 2px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform-origin: 0% 100%; /* Rotate from the end */
}

/* Create multiple rays rotated around the sun */
.ray:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); }
.ray:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg); }
.ray:nth-child(3) { transform: translate(-50%, -50%) rotate(90deg); }
.ray:nth-child(4) { transform: translate(-50%, -50%) rotate(135deg); }
.ray:nth-child(5) { transform: translate(-50%, -50%) rotate(180deg); }
.ray:nth-child(6) { transform: translate(-50%, -50%) rotate(225deg); }
.ray:nth-child(7) { transform: translate(-50%, -50%) rotate(270deg); }
.ray:nth-child(8) { transform: translate(-50%, -50%) rotate(315deg); }


@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="sun">
  <div class="ray"></div>
  <div class="ray"></div>
  <div class="ray"></div>
  <div class="ray"></div>
  <div class="ray"></div>
  <div class="ray"></div>
  <div class="ray"></div>
  <div class="ray"></div>
</div>

Explanation:

• sun class:

  • width and height: Set the size of the sun.
  • border-radius: 50%: Makes it a circle.
  • background: radial-gradient(circle, yellow, orange): Creates a gradient from yellow in the center to orange at the edges.
  • box-shadow: Gives the sun a yellow glow.
  • position: relative: Allows positioning the rays relative to the sun.
  • animation: Rotates the sun continuously (optional).

• ray class:

  • position: absolute: Positions each ray absolutely within the sun container.
  • background: yellow: Sets the ray color.
  • width and height: Define the ray's dimensions.
  • top: 50% and left: 50%: Centers the rays.
  • transform-origin: 0% 100%: Sets the rotation origin to the end of the ray.
  • transform: translate(-50%, -50%) rotate(Xdeg): Centers the ray correctly after rotation and rotates it by X degrees. Each ray has a different rotation value.

• @keyframes rotate: Defines the animation for rotating the sun.

This CSS creates a simple sun with eight rays. You can adjust the number of rays, their length, color, and other properties to customize the appearance. You can also remove the animation if you don't want the sun to rotate. This is a basic example, and more complex sun designs can be achieved with more advanced CSS techniques.