Ghost优化:为博客增加流星效果

最近想要把自己之前搭建的技术博客做得更赏心悦目一些,所以就有了各种优化UI的小折腾。原先在主页的基础上加了一个背景图,是繁星满天的一个城市图。由于是静态图,就感觉缺少了点什么。所以就想加点动效,最合适的莫不过加一个流星划过天际的效果了。于是就开始搞起来吧。
只要以下几段简单的代码就可以轻松实现功能了,效果就如你在当前页面见到的流星效果。

HTML代码

该代码放在default.hbs的body开头

<div class="index">
    <div id="stars">
       <div class="star" style="top: 0px;left: 500px;"></div>
    </div>
</div>

JS代码

该代码放在default.hbs的末尾

    <script>

    var stars = document.getElementById('stars')

    // js随机生成流星
    for (var j = 0; j < 20; j++) {
        var newStar = document.createElement("div")
        newStar.className = "star"
        newStar.style.top = randomDistance(500, -100) + 'px'
        newStar.style.left = randomDistance(1980, 300) + 'px'
        stars.appendChild(newStar)
    }

    // 封装随机数方法
    function randomDistance(max, min) {
        var distance = Math.floor(Math.random() * (max - min + 1) + min)
        return distance
    }

    var star = document.getElementsByClassName('star')

    // 给流星添加动画延时
    for (var i = 0, len = star.length; i < len; i++) {  
        star[i].style.animationDelay = i % 6 == 0 ? '0s' : i * 0.8 + 's'
    }
    </script>

CSS代码

该代码放在screen.css的末尾

注:由于有背景图片,所以背景色需要调整透明的。

.index {
    position:fixed;
    width:100%;
    background: rgba(0,0,0,0);
    height:100%;
}
#stars {
    width:100%;
}
.star {
    display:block;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#FFF;
    position:absolute;
    transform-origin:100% 0;
    animation:star-ani 4s linear infinite;
    -webkit-animation:star-ani 5s linear infinite;
    box-shadow:0 0 5px 5px rgba(255,255,255,.3);
    opacity:0;
    z-index:2;
}
.star:after {
    content:'';
    display:block;
    top:0px;
    left:4px;
    border:0px solid #fff;
    border-width:0px 90px 2px 90px;
    border-color:transparent transparent transparent rgba(255,255,255,.3);
    transform:rotate(-45deg) translate3d(1px,3px,0);
    box-shadow:0 0 1px 0 rgba(255,255,255,.1);
    transform-origin:0% 100%;
}
@keyframes star-ani {
    0% {
    opacity:0;
    transform:scale(0) translate3d(0,0,0);
}
20% {
    opacity:0.8;
    transform:scale(0.2) translate3d(-100px,100px,0);
}
40% {
    opacity:0.8;
    transform:scale(0.4) translate3d(-200px,200px,0);
}
60% {
    opacity:0.8;
    transform:scale(0.6) translate3d(-300px,300px,0);
}
80% {
    opacity:1;
    transform:scale(1) translate3d(-350px,350px,0);
}
100% {
    opacity:1;
    transform:scale(1.2) translate3d(-400px,380px,0);
}
}

最后将代码生成后,大功告成!整体效果还是非常不错的~

作者:Qingyun
                
comments powered by Disqus