如何使用 HTML 和 CSS 创建发光的星星效果？

发光的星星效果是用于深色主题网站的最酷的效果之一。它被称为星星效果，因为它具有以不同方式动画的小发光球，看起来像星星。此效果可用于图像滑块、加载器，也可用作展示 UI 元素。

方法：方法是使用无序列表创建小球，然后使用关键帧和第 n 个子属性为它们设置动画。这两个属性的基本知识是在本文中进一步学习的先决条件。

HTML 代码：在本节中，我们创建了一个无序列表。

CSS 代码：对于 CSS，请按照以下步骤操作：

• 第 1 步：根据需要对齐列表。我们已将列表与页面中心对齐。
• 第 2 步：删除所有列表样式并使用边框半径为它们设置圆形。
• 第 3 步：使用关键帧通过增加比例来为球设置动画。没有固定的方法可以做到这一点，您可以根据需要更改不同帧上的比例。
• 第 4 步：使用第 n 个子属性在每个 li 元素的动画之间应用一些延迟。

提示：此效果是最通用的效果之一。您可以更改不同帧上的动画类型或更改延迟。因此，尝试使用本文中使用的不同属性值来为自己找到最佳动画。此外，此效果仅在深色主题页面上看起来不错，因此请勿在浅色主题网站上使用它。

body {
       background: rgb(70, 69, 69);
     }
     ul {
       position: absolute;
       top: 50%;
       left: 50%;
       display: flex;
     }
     ul li {
       list-style: none;
       width: 40px;
       height: 40px;
       background: #fff;
       border-radius: 50%;
 
       animation: animate 1.7s ease-in-out infinite;
     }
     @keyframes animate {
       0%,
       40%,
       100% {
         transform: scale(0.2);
       }
       20% {
         transform: scale(1);
       }
     }
 
     ul li:nth-child(1) {
       animation-delay: -1.2s;
       background: yellow;
       box-shadow: 0 0 50px yellow;
     }
     ul li:nth-child(2) {
       animation-delay: -1s;
       background: rgb(99, 247, 136);
       box-shadow: 0 0 50px rgb(99, 247, 136);
     }
     ul li:nth-child(3) {
       animation-delay: -0.8s;
       background: rgb(30, 243, 225);
       box-shadow: 0 0 50px  rgb(30, 243, 225);
     }
     ul li:nth-child(4) {
       animation-delay: -0.6s;
       background: rgb(241, 58, 58);
       box-shadow: 0 0 50px rgb(241, 58, 58);
     }
     ul li:nth-child(5) {
       animation-delay: -0.4s;
       background: rgb(247, 61, 176);
       box-shadow: 0 0 50px  rgb(247, 61, 176);
     }

完整代码：是以上两段代码的组合。

输出：