星空代码html_html5+css3开发实战之超美月夜星空

css3动画可以实现很多好玩儿有趣的事情，让网页的效果实现了之前gif或者flash才能干的事情，css3动画简单好用。今天我们就以学习css3动画为目的完成一个很赞的页面

具体效果如下：

试想这样一个场景：

在一个美妙的夜晚，天空中繁星点点 ，虽然还有淡淡的云层，但月亮依然明亮，我们看到有一个熟悉的身影从天空中掠过。

一个看星星的小朋友问爸爸：“哇~，快看是圣诞老人吗?”

小朋友爸爸回答："不也可能是送快递的！世界上没有圣诞老人。”

其实我想说，做动画要保留童真才能有创意。学前端也要保持好奇心，不要迷信任何权威。

好了开始正题。

想要完成这个动画首先需要搞明白animation。

Animation 参数详解：

@keyframes 规则和所有动画属性

@keyframes 规定动画

animation 所有动画属性的简写属性，除 animation-play-state

animation-name @keyframes 动画名称

animation-duration 动画完成一个周期所花秒或毫秒数。默认是 0

animation-timing-function 动画的速度曲线。默认是 "ease"

animation-delay 动画延迟多久开始。默认是 0

animation-iteration-count 规定动画被播放的次数。默认是 1

animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"

animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。

Animation简写方式：

animation: name duration timing-function delay iteration-count direction;

搞懂box-shadow：

box-shadow: h-shadow v-shadow blur spread color inset;

还要明白:after伪类的使用

:after 伪元素在元素之后添加内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点

ps:上面这些你都可以在网上找到教程，但你缺一次实践

然后就可以搞定“月夜星空了”

接下来我们看下月夜星空的html代码

然后是css3：

html,body {height: 100%;width: 100%;}body { background:#000;}/* 漫天繁星 */.solar-system{height:100vh;}.solar-system:after {content: "";position: absolute;height: 4px;width: 4px;top: -2px;background: white;-webkit-box-shadow: 620px 1759px 0 0px rgba(255, 255, 255, 0.379), 115px 1477px 0 0px rgba(255, 255, 255, 0.583), 1146px 20px 0 0px rgba(255, 255, 255, 0.761)border-radius: 100px;} /* 淡淡的云层 */.clouds{ background: url(../img/clouds.png); z-index:30; position: absolute;top:0;left:0;width: 100%;height: 100%; -moz-animation:move-clouds-back 200s linear infinite; -ms-animation:move-clouds-back 200s linear infinite; -o-animation:move-clouds-back 200s linear infinite; -webkit-animation:move-clouds-back 200s linear infinite; animation:move-clouds-back 200s linear infinite; }/* 让繁星闪烁 */.twinkling{ background:url(../img/twinkling.png) repeat;position: absolute;top:0;left:0;z-index:10;width: 100%;height: 100%; -moz-animation:move-twink-back 200s linear infinite; -ms-animation:move-twink-back 200s linear infinite; -o-animation:move-twink-back 200s linear infinite; -webkit-animation:move-twink-back 200s linear infinite; animation:move-twink-back 200s linear infinite;}.moon{ position:absolute; top:10%; right:10%; width:200px; height:200px; border-radius:50%; background:#FFFF8C; box-shadow:0px 0px 100px #FFFF8C; box-shadow: inset 0 6px 0 -2px rgba(0, 0, 0, 1); z-index:25; -webkit-animation: moonAnimation 3s infinite; -moz-animation: moonAnimation 3s infinite; -ms-animation: moonAnimation 3s infinite; -o-animation: moonAnimation 3s infinite; animation: moonAnimation 3s infinite;}/*专门在晚上送快递的 */.santas {animation: animate-santas 9s linear 1;opacity: 0;position: absolute; top:10%; right:10%;z-index: 60;}/* 动画 */@keyframes moonAnimation { 0% { -moz-box-shadow: 0px 0px 100px #FFFF8C; box-shadow: 0px 0px 100px #FFFF8C; } 50% { -moz-box-shadow: 0px 0px 140px #FFFF8C; box-shadow: 0px 0px 140px #FFFF8C; } 100% { -moz-box-shadow: 0px 0px 100px #FFFF8C; box-shadow: 0px 0px 100px #FFFF8C; }}@keyframes animate-santas {0% {opacity: 0.1;transform: translate(-200px, 0px);}100% {opacity: 0.5;transform: translate(1000px, 0) rotate(-15deg) scale(.3);}}/* 动画 */@keyframes move-clouds-back { from {background-position:0 0;} to {background-position:10000px 0;}}@keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;}}

因为我们的漫天繁星不是图片而是使用:after伪类来实现的，因此 繁星代码有省略，避免文字过长，感兴趣的同学可以加关注私信我获取或者添加。

感兴趣的同学可以加关注，私信我，我将提供相关素材和讲解。欢迎指正交流

最后祝各位在像素世界里玩儿的开心。