渐层色制作星空背景
这篇教学会使用 CSS 的重复线性渐层颜色，在只用了一两个 div 的状态下，制作包含充满星星的天空以及流星，并搭配 CSS 的 transform 转换与 animation 动画，制作具有特色的星空背景效果。
快速导览：
制作星空和流星
制作星空背景需要先产生“满天的星星”，运用 CSS 的重复线性渐层搭配重复背景，只要调整颜色的间距，就可以做出“全部都是小点”的背景，下方范例呈现全都是白点黑底的效果。
<!-- HTML 程式碼 -->
<div class="sky">
<div class="star"></div>
</div>
<!-- CSS 程式碼 -->
<style>
div {position: relative;}
.sky {
margin: 20px;
width: 400px;
height: 400px;
}
.star {
width: 100%;
height: 100%;
background: repeating-linear-gradient(
35deg,
#0000 1px, #0000 2px,
#000 2px, #000 51px,
#000 51px, #000 52px,
#000 52px, #000 80px),
repeating-linear-gradient(
-35deg,
#fff 1px, #fff 2px,
#000 2px, #000 51px,
#fff8 51px, #fff8 52px,
#000 52px, #000 80px);
}
</style>
由于星空位于“同一层”，移动时会整片移动，为了让星空有视差的效果，可以额外使用虚拟元素“::before”额外制作另外一层间距不同的星空，以及使用虚拟元素“::after”制作流星，流星的做法只需要将交错的渐层“变长”并且不要让颜色重叠，就可以产生类似流星的效果，完成后透过 mix-blend-mode: screen 就能让图层使用“滤色”模式互相混合。
<!-- HTML 程式碼 -->
<div class="sky">
<div class="star"></div>
</div>
<!-- CSS 程式碼 -->
<style>
div {position: relative;}
.sky {
margin: 20px;
width: 400px;
height: 400px;
background: linear-gradient(#336 0, #000 100%); /* 外層加上藍到黑的背景 */
}
.star {
width: 100%;
height: 100%;
background: repeating-linear-gradient(
35deg,
#0000 1px, #0000 2px,
#000 2px, #000 51px,
#0000 51px, #0000 52px,
#000 52px, #000 80px),
repeating-linear-gradient(
-35deg,
#fff 1px, #fff 2px,
#000 2px, #000 51px,
#fff8 51px, #fff8 52px,
#000 52px, #000 80px);
mix-blend-mode: screen; /* 混合模式 */
}
/* 虛擬元素 */
.star::before, .star:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: screen;
}
/* 虛擬元素製作第二層星空，注意角度和間距有所不同 */
.star::before {
background: repeating-linear-gradient(
80deg,
#0000 1px, #0000 2px,
#000 2px, #000 51px),
repeating-linear-gradient(
0deg,
#fffa 1px, #fffa 2px,
#000 2px, #000 51px);
}
/* 虛擬元素製作流星，注意漸層色的位置 */
.star::after {
background: repeating-linear-gradient(
35deg,
#0000 1px, #0000 2px,
#000 100px, #000 500px),
repeating-linear-gradient(
-35deg,
#fff 1px, #fff 2px,
#000 2px, #000 400px);
background-size: 200% 200%; /* 調整尺寸 */
background-position: 200% 20%; /* 調整位置 */
}
</style>
让星空与流星动起来
做出星空之后，就可以加入 CSS animation，让两层星空以不同的速度缓慢的往左边移动，然后流星用比较快的速度往左下移动，详细步骤可以观看下方程序码中的注解说明，需要注意的是如果要移动背景，需要先将背景尺寸变大，否则就无法移动背景。
<!-- HTML 程式碼 -->
<div class="sky">
<div class="star"></div>
</div>
<!-- CSS 程式碼 -->
<style>
div {position: relative;}
.sky {
margin: 20px;
width: 400px;
height: 400px;
background: linear-gradient(#336 0, #000 100%);
overflow: hidden; /* 隱藏超過範圍的部分 */
}
.star {
width: 100%;
height: 100%;
background: repeating-linear-gradient(
35deg,
#0000 1px, #0000 2px,
#000 2px, #000 51px,
#0000 51px, #0000 52px,
#000 52px, #000 80px),
repeating-linear-gradient(
-35deg,
#fff 1px, #fff 2px,
#000 2px, #000 51px,
#fff8 51px, #fff8 52px,
#000 52px, #000 80px);
mix-blend-mode: screen;
background-size: 200% 200%; /* 背景變大 */
background-position: 350% -50%; /* 背景位置 */
animation: skyMove linear infinite 100s; /* 星空移動動畫，線性移動 100 秒 */
}
.star::before, .star:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: screen;
}
.star::before {
background: repeating-linear-gradient(
80deg,
#0000 1px, #0000 2px,
#000 2px, #000 51px),
repeating-linear-gradient(
0deg,
#fffa 1px, #fffa 2px,
#000 2px, #000 51px);
background-size: 200% 200%; /* 背景變大 */
background-position: 350% -50%; /* 背景位置 */
animation: skyMove linear infinite 120s; /* 星空移動動畫，線性移動 120 秒 */
}
.star::after {
background: repeating-linear-gradient(
35deg,
#0000 1px, #0000 2px,
#000 100px, #000 500px),
repeating-linear-gradient(
-35deg,
#fff 1px, #fff 2px,
#000 2px, #000 400px);
background-size: 200% 200%; /* 背景變大 */
background-position: 135% 60%; /* 背景位置 */
animation: starMove infinite linear 5s; /* 流星移動動畫，線性移動 5 秒 */
}
/* 星空移動 */
@keyframes skyMove {
0%{background-position: 0% 0%;}
100%{ background-position: 200% 0%;}
}
/* 流星移動 */
@keyframes starMove {
0%{background-position: 135% 60%;}
100%{ background-position: 350% -50%;}
}
</style>
星空动画中加入会动的文字
进行到这个步骤，主要星空的效果已经完成，接着可以替星空加入更多装饰，例如将画面改成圆形，模拟太空船的窗户，接着使用文字搭配 CSS transform 的 3D 转换效果，就能让文字从窗户外旋转着飞过去，详细步骤可以参考下方程序码的注解说明。
<!-- HTML 程式碼 -->
<div class="sky">
<h1>OXXO</h1>
<div class="star"></div>
</div>
<!-- CSS 程式碼 -->
<style>
div {position: relative;}
.sky {
margin: 20px;
width: 400px;
height: 400px;
background: linear-gradient(#336 0, #000 100%);
overflow: hidden;
border: 20px solid #633; /* 邊框加粗 */
border-radius: 50%; /* 圓角邊框讓形狀變成圓形 */
perspective: 100px; /* 相機視角往後移動 100px，需要加上這個才會有 3D 效果 */
perspective-origin:center center; /* 攝影機對齊中心 */
}
h1 {
position: absolute;
font-size: 100px;
color: #fff;
top: 50px;
left: 0;
transform: translate(-400px,10px) rotate3d(1,1,1,60deg); /* 文字 3D 變換 */
animation: textMove linear infinite 10s; /* 動畫無限重複，文字線性移動 10 秒 */
}
/* 文字動畫 */
@keyframes textMove {
0%{transform: translate(-400px,10px) rotate3d(1,1,1,60deg);}
25%{transform: translate(-200px,60px) rotate3d(1,2,1.5,60deg);}
50%{transform: translate(0px,-60px) rotate3d(.5.1,1,1,60deg);}
75%{transform: translate(200px,60px) rotate3d(5,1.5,3,60deg);}
100%{transform: translate(400px,10px) rotate3d(1.5,0.5,1,60deg);}
}
.star {
width: 100%;
height: 100%;
background: repeating-linear-gradient(
35deg,
#0000 1px, #0000 2px,
#000 2px, #000 51px,
#0000 51px, #0000 52px,
#000 52px, #000 80px),
repeating-linear-gradient(
-35deg,
#fff 1px, #fff 2px,
#000 2px, #000 51px,
#fff8 51px, #fff8 52px,
#000 52px, #000 80px);
mix-blend-mode: screen;
background-size: 200% 200%;
background-position: 350% -50%;
animation: skyMove linear infinite 100s;
}
.star::before, .star:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: screen;
}
.star::before {
background: repeating-linear-gradient(
80deg,
#0000 1px, #0000 2px,
#000 2px, #000 51px),
repeating-linear-gradient(
0deg,
#fffa 1px, #fffa 2px,
#000 2px, #000 51px);
background-size: 200% 200%;
background-position: 350% -50%;
animation: skyMove linear infinite 120s;
}
.star::after {
background: repeating-linear-gradient(
35deg,
#0000 1px, #0000 2px,
#000 100px, #000 500px),
repeating-linear-gradient(
-35deg,
#fff 1px, #fff 2px,
#000 2px, #000 400px);
background-size: 200% 200%;
background-position: 135% 60%;
animation: starMove infinite linear 5s;
}
@keyframes skyMove {
0%{background-position: 0% 0%;}
100%{ background-position: 200% 0%;}
}
@keyframes starMove {
0%{background-position: 135% 60%;}
100%{ background-position: 350% -50%;}
}
</style>
小结
虽然 CSS 没有“随机”的功能可以制作随机的星星 ( 希望未来会有 )，但仍然可以透过一些小技巧，让星空效果更加逼真，这篇教学单纯运用渐层色的互相搭配，就可以在不需要一大堆 div 的状态下，纯粹利用 CSS 作出星空效果。
微信扫码关注
抖音扫码关注