用CSS实现超美星空特效

大家好,我是Ned,一个刚刚入门前端未满两年的大三小学生

未来路还长, 一起努力加油吧❤~

关注微信公众号:前端成长日记,回复星空特效获取本文源码

前言

最近真是越来越对CSS感兴趣了,于是再来整一手,夜晚的星星,再配合上皎洁的月光,这唯美的星空,它来了!

今天带领大家,用CSS实现一下,这美丽的星空。

开始实现星空

用CSS实现超美星空特效_第1张图片
我是找了张图片,这毕竟功力有限,目前还不能人造星~,下面说一下如何将它放置在夜空中,并实现眨眼睛的效果:

运用了一个span标签,将此图片作为其背景图,来生成星星:

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';
    span.style.zIndex = "0";
    var scale = Math.random() * 1.5;
    span.style.transform = 'scale('+ scale + ', ' + scale + ')';
}

先获取屏幕宽高,完后用上随机数使得星星的位置随机,大小随机,频率随机。

用CSS实现超美星空特效_第2张图片

会眨眼睛的才是好星星

星星还要是一眨一眨的,才好看,所以我们给它加上一个动画,更改其的透明度就好:

@keyframes flash {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

但是我们很快发现一个问题,就是它太过于整齐划一:

我们在生成星星的时候,给它每一个的延迟频率随机一下,这样就能保证它们有一种参差错落的感觉。

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

现在来看看我们美丽的星空吧~:

最后再给星星加一个hover效果,将其放大一点,完后旋转个180

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

用CSS实现超美星空特效_第3张图片

开始实现月亮

一个美丽的夜晚,天空中除了星星,应当还有月亮:月亮主要是两个动画,一个是从左下往右上移动,达到一个月亮升起的效果,另一个是随着升起,月亮周围的光辉变得越来越亮眼。

做法:将月亮放到一个容器中,用容器来做移动的特效,月亮本身只关注光辉就好。

<div id="wrapper">
        <div id="circle">div>
div>
#wrapper {
    position:absolute;
    top:50px;
    left:80%;
    width:200px;
    height:200px;
    margin-left:-100px;
    animation: moonline 5s linear;
}
@-webkit-keyframes moonline {
    0% {top:250px;left:0%;opacity:0;}
    30% {top:150px;left:40%;opacity:0.5;}
    80% {top:50px;left:80%;opacity:1;}
}
#circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: #EFEFEF;
    box-shadow:0 0 40px #FFFFFF;
    border-radius: 100px;
    animation:moonlight 5s linear;

}
@-webkit-keyframes moonlight {
    0% {-webkit-box-shadow:0 0 10px #FFFFFF;}
    30% {-webkit-box-shadow:0 0 15px #FFFFFF;}
    40% {-webkit-box-shadow:0 0 20px #FFFFFF;}
    50% {-webkit-box-shadow:0 0 25px #FFFFFF;}
    100% {-webkit-box-shadow:0 0 30px #FFFFFF;}
}

看一下最终效果:

写在最后

如果觉得本文对你有帮助,点个赞支持一下吧❤~

关注微信公众号:前端成长日记,回复星空特效获取本文源码

你可能感兴趣的:(Ned的前端学习日记,css,前端,css3,前端框架,html)