• js实现星空效果


    本次主要是来实现上面的星空效果:在黑色的背景下面,有大小不一的星星在闪烁,当鼠标悬浮时,星星放大并旋转。

    首先,我们需要一个大的夜空容器和放星星的容器:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            body{
                background-color: #000;
            }
    
            span{
                width: 30px;
                height: 30px;
                background: url("images/star.png") no-repeat;
                position: absolute;
                background-size:100% 100%;
               }
        </style>
    </head>
    <body>
    <span></span>
    </body>
    </html>

    此时在大背景下有一颗星星,但该星星是固定的,我们需要通过css添加闪烁的效果:

    span{
        animation: flash 1s alternate infinite;
    }
            
    @keyframes flash {
        0%{opacity: 0;}
        100%{opacity: 1;}
    }

    目标是在不同的地方显示随机大小的星星,所以,我们需要做以下几步操作:

    • 计算出星星可显示位置
    • 循环生成多个星星,即span
    • 利用随机数生成星星的定位值,使其在不同位置显示
    • 利用随机数计算星星的缩放比,在界面中显示不同大小的星星
    <script>
        window.onload = function () {
            //屏幕的尺寸
            var screenW = document.documentElement.clientWidth;
            var screenH = document.documentElement.clientHeight;
    
            //动态创建多个星星
            for(var i=0; i<150; i++){
                var span = document.createElement('span');
                document.body.appendChild(span);
    
                //位置随机
                var x = parseInt(Math.random() * screenW);
                var y = parseInt(Math.random() * screenH);
                span.style.left = x + 'px';
                span.style.top = y + 'px';
    
                 //大小随机
                var scale = Math.random() * 1.5;
                span.style.transform = 'scale('+ scale + ', ' + scale + ')';
            }
        }
    </script>

    此时界面中已经出现了上面的效果,但是此时所有星星的闪烁频率是相同的,因为在用css3写样式的时候,我们只定义了相同的执行时间,所以我们可以给不同的星星的动画添加不同的延迟时间,这样视觉上就不会出现所有的一起闪烁的效果了。

    var rate = Math.random() * 1.5;
    span.style.animationDelay = rate + 's';

    最后就是添加鼠标悬浮事件了,当鼠标悬浮时,星星旋转并放大,我们也可以用css实现。

    span:hover{
        transform: scale(3, 3) rotate(180deg) !important;
        transition: all 1s;
      }

    至此,我们就完成了最开始想要的效果了,完整代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            body{
                background-color: #000;
            }
    
            span{
                width: 30px;
                height: 30px;
                background: url("images/star.png") no-repeat;
                position: absolute;
                background-size:100% 100%;
                animation: flash 1s alternate infinite;
            }
            
            @keyframes flash {
                0%{opacity: 0;}
                100%{opacity: 1;}
            }
    
            span:hover{
                transform: scale(3, 3) rotate(180deg) !important;
                transition: all 1s;
            }
        </style>
    </head>
    <body>
    <span></span>
    <script>
        window.onload = function () {
            // 屏幕的尺寸
            var screenW = document.documentElement.clientWidth;
            var screenH = document.documentElement.clientHeight;
    
            // 2. 动态创建多个星星
            for(var i=0; i<150; i++){
                var span = document.createElement('span');
                document.body.appendChild(span);
    
                //位置随机
                var x = parseInt(Math.random() * screenW);
                var y = parseInt(Math.random() * screenH);
                span.style.left = x + 'px';
                span.style.top = y + 'px';
    
                //大小随机
                var scale = Math.random() * 1.5;
                span.style.transform = 'scale('+ scale + ', ' + scale + ')';
    
                //频率随机
                var rate = Math.random() * 1.5;
                span.style.animationDelay = rate + 's';
            }
        }
    </script>
    </body>
    </html>

    下载完整详细代码:点这里

  • 相关阅读:
    tomcat的一些知识
    WebHttpBinding的流传输模式让我头大了
    实体类编程的最佳伴侣——高效的实体类复制
    MySQL导入导出CSV
    WPF下的事件延迟触发
    WCF使用Json传输的一个BUG
    WCF大文件断点下载示例
    比较DataTable和实体类
    WPF下的右键菜单隐藏
    MySql Workbench中的BUG
  • 原文地址:https://www.cnblogs.com/yuyujuan/p/9588530.html
Copyright © 2020-2023  润新知