CSS 修炼日记：提瓦特的星空 ⭐
前言
大家好，我是练习时长两年半的前端练习生 Tako。最近在上网冲浪 🏄 的时候，无意间发现了一位大佬做的 圣遗物强化模拟器，其中强化界面的星空背景非常有趣。恰好最近我也在研究制作 TakoTako 原神圣遗物的模块，遂萌生了学习一下的想法。
下图为 TakoTako 中制作完成后的效果：
在原版的基础上做了改进，增加了星空颜色变化的效果（gif 已加速）：
开始：组件结构
首先写一下 HTML 结构。
1
2
3
4
5
6
7
8
9
| <div class="stars-container stars-bg">
<div class="stars-box">
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>
</div>
<div class="fog"></div>
<div class="horizon"></div>
</div>
|
我们用一个div.stars-container包裹所有的子组件。这个星空组件由三个部分组成：
- stars-box：包含 3 组星星，每组星星的密度，位置，速度各不相同，以达到 3D 的效果。
- fog：雾气效果，由一个雾气材质贴图提供。
- horizon：发光的地平线效果，由 linear-gradient 渐变实现。
CSS：星空颜色背景 🌃
CSS 部分，首先我们来实现一下最简单的星空颜色背景。
1
2
3
4
5
6
7
8
9
10
| .stars-container {
background-image: linear-gradient(180deg, #703519, #7d5326);
animation: stars-bg-change 12s linear infinite;
div {
position: absolute;
width: 100%;
height: 100%;
}
}
|
在动画中使用 hue-rotate() 给它加上颜色的变换，一个周期转 360 度。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| @keyframes stars-bg-change {
0% {
filter: hue-rotate(0deg) brightness(0.8);
-webkit-filter: hue-rotate(0deg) brightness(0.8);
}
50% {
filter: hue-rotate(180deg) brightness(0.8);
-webkit-filter: hue-rotate(180deg) brightness(0.8);
}
50% {
filter: hue-rotate(360deg) brightness(0.8);
-webkit-filter: hue-rotate(360deg) brightness(0.8);
}
}
|
到这一步的效果如图：
CSS：地平线 🌅
地平线实际上就是一个半透明的纵向渐变（自下而上）。中间为比较醒目的白色，两边为纯透明。给它一个相对较矮的高度（30%），放置在靠下方的位置。
1
2
3
4
5
6
7
8
9
10
11
12
| .horizon {
background-image: linear-gradient(
0,
rgba(0, 0, 0, 0),
rgba(255, 255, 255, 0.6),
rgba(0, 0, 0, 0)
);
opacity: 0.3;
height: 30% !important;
left: 0;
bottom: 5rem;
}
|
到这一步的效果如图：
CSS：雾气效果 ☁️
雾气效果需要使用下面的材质贴图：
对 div.fog 套用这个背景图片，给它一个差不多的宽高，并且 repeat。
CSS 代码如下：
1
2
3
4
5
6
7
8
| .fog {
background-image: url(fog.png);
background-size: 150rem 60rem;
animation: fog-move 50s linear infinite;
opacity: 0.8;
top: 0;
left: 0;
}
|
再加个动画让它动起来 🏃：
1
2
3
4
5
6
7
8
9
10
11
| @keyframes fog-move {
0% {
background-position-x: 150rem;
background-position-y: 60rem;
}
100% {
background-position-x: 0;
background-position-y: 0;
}
}
|
到这一步的效果如图：
CSS：加点星星 ⭐!
星星的原理其实很简单：给三个盒子各随机生成一堆白色的 box-shadow 属性，再给每个盒子一个不同速度、不同相位的动画，来模拟斗转星移的效果。box-shadow的代码实在太多，下面只展示前几行和其他关键的 CSS 属性（大佬好像也是借鉴的别人的，但实在找不到原作者了 o(╥﹏╥)o）。
1
2
3
4
5
6
7
8
9
10
11
12
13
| #stars {
width: 0.0625rem;
height: 0.0625rem;
background: transparent;
animation: animStar 50s linear infinite
box-shadow: 87.9375rem 31.9375rem #fff, 100.6875rem 7.4375rem #fff,
105.375rem 59.75rem #fff, 72.6875rem 120.5625rem #fff,
57rem 77.625rem #fff, 30.625rem 29.3125rem #fff,
54.3125rem 26.5625rem #fff, 90.4375rem 55.6875rem #fff,
26.375rem 122.5rem #fff, 32.3125rem 124.6875rem #fff,
46.125rem 10.6875rem #fff, 83rem 104.25rem #fff,
// 以下省略 1000 行。。。
}
|
这部分完整 CSS 代码请参考：
https://github.com/takosenpai2687/takosenpai2687.github.io/blob/master/source/static/TeyvatStars/stars.css
接下来让星星 ⭐ 动起来：
1
2
3
4
5
6
7
8
9
| @keyframes animStar {
from {
transform: translateX(40rem);
}
to {
transform: translateX(125rem);
}
}
|
到这一步的效果如图：
结语
谁说提瓦特的星空是虚假的，我派蒙第一个不服！
下一期将带来派蒙和她的五个玩具。提前预告一下效果图：
参考
本文完整代码
TakoTako 原神页
原神圣遗物模拟器（作者：DioMao）
CSS 星星效果（作者：csshuang）
