知识点


  2. CSS使用@keyframes自定义动画，使用animation调用自定义动画
  3. opacity 透明度。从 0.0 （完全透明）到 1.0（完全不透明）
  4. CSS中transform
  5. animation-delay 属性定义动画何时开始。
  6. 求屏幕尺寸​​var 宽 = document.documentElement.clientWidth; var 高 = document.documentElement.clientHeight; ​​
  7. JS创建节点
  8. JS在某元素后追加节点​​appendChild() ​​
  9. UnderScore.js通过_调用其中的API

运行效果

Javascript特效：星星海特效_html

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="UnderScore.js"></script>
    <style>
        *{margin: 0;padding-top: 0}
        body{background-color: #000}
        span{
            width: 30px;
            height: 30px;
            background: url("star.png") no-repeat;
            position: absolute;
            background-size: contain;
            animation: flash 1s alternate infinite;
        }
        @keyframes flash{
            0%{opacity: 0}
            25%{opacity: 0.25}
            50%{opacity: 0.5}
            75%{opacity: 0.75}
            100%{opacity: 1}
        }
        span:hover{
            transform: scale(3, 3) rotate(180deg) !important;
            transition: all 1s;
        }
    </style>
</head>
<body>
<script>
    window.onload = function (ev) {
        // 1. 求出屏幕尺寸
        var screenWidth = document.documentElement.clientWidth;
        var screenHeight = document.documentElement.clientHeight;

        // 2. 动态创建10颗星星
        for (var i = 0; i < 200; i++) {
            // 2.1 创建星星
            var span = document.createElement('span');
            document.body.appendChild(span);

            // 2.2 随即坐标
            var x = parseInt(_.random(0, screenWidth));
            var y = parseInt(_.random(0, screenHeight));
            span.style.left = x +'px';
            span.style.top = y + 'px';

            // 2.3 随机缩放
            var scale = _.random(0, 1.5);
            span.style.transform = 'scale('+scale+','+scale+')';

            // 2.4 频率
            var rate = _.random(0, 1.5);
            span.style.animationDelay = rate + 's';
        }
    }
</script>
</body>
</html>