简要教程
这是一款使用纯CSS3制作的炫酷3D星空动画特效。该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真。
使用方法
HTML结构
该3D星空特效只使用一个
元素作为容器即可。
CSS样式
该3D星空特效中的星星使用stars元素的box-shadow来制作。stars元素的:before和:after伪元素用于制作背景的小星星。
最后通过stars元素执行fly帧动画,是星星由远到近接近屏幕,产生放大的感觉。html, body {
height: 100%;
overflow: hidden;
}
body {
background: #000;
perspective: 340px;
}
.stars {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;
box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px
#cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px
#f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d