星空闪动小特效案例（h5+css+js）

最新推荐文章于 2024-07-03 12:20:01 发布

一杯冰美式：）.

最新推荐文章于 2024-07-03 12:20:01 发布

阅读量1.4k

点赞数 16

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_65376296/article/details/131735066

版权

效果图如上：

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>星空特效</title>
       <style type="text/css">
           * {
               margin: 0;
               padding: 0;
               list-style: none;
           }

           body {
               width: 100%;
               height: 800px;
               background-image: linear-gradient(#030329 20%, #242498);
               overflow: hidden;
           }

           .star {
               width: 20px;
               height: 20px;
               background: url(./img/star.png)no-repeat;
               position: absolute;
               background-size: 100% 100%;
               animation: star 1s alternate infinite;
           }
           @keyframes star{
               0%{
                   opacity: 0;
               }
               100%{
                   opacity: 1;
               }
           }
           .star:hover{
               /* 缩放 */
               transform: scale(3) rotate(180deg) !important;
               /* 过度 */
               transition: all 1s;
           }


           li{
               width: 100px;
               height: 100px;
               background-color: yellow;
               border-radius: 50%;
               background-image:radial-gradient(rgba(255,255,255,0.3) 55%,rgba(255,255,255,0.8) 80%);
               transform: rotate(45deg);
               margin-top: 50px;
               margin-left: 80%;
               transform: rotate(45deg);
               position: absolute;
           }
           li::after{
               content: '';
               width: 5%;
               height: 5%;
               border: 100px solid antiquewhite;
               border-radius: 50%;
               border-color: rgba(3, 3, 41, 1) transparent transparent;
               transform: rotate(45deg);
               position: absolute;
               top: 10%;
               right: 10%;}

       </style>
   </head>
   <body>
       <li></li>
       <script type="text/javascript">
           window.onload = function() {
               //计算屏幕尺寸
               var wid = document.documentElement.clientWidth
               var Hei = document.documentElement.clientHeight
               //放置星星所处的soan标签
               for (var i = 0; i < 100; i++) {
                   //创建标签：span
                   var mySpan = document.createElement("span")
                   //为span标签添加class属性
                   mySpan.className = "star";
                   //将span标签放入body
                   document.body.appendChild(mySpan);
                   //随机生成星星
                   mySpan.style.top = Math.random() *Hei + 'px';
                   mySpan.style.left = Math.random() *wid + 'px';
                   //随机设置大小
                   var scale = Math.random() * 1.5;
                   mySpan.style.transform = 'scale('+scale+')';
                   //随机闪烁
                   var rate = Math.random() * 1.5;
                   mySpan.style.animationDelay = rate + 's';
               }

           }
       </script>
   </body>
</html>