给网站添加一个原神启动特效

归档3

前端美化1 教程1 文章示例1

346 字

2 分钟

给网站添加一个原神启动特效

2025-10-05

前端美化

教程

前端美化

浏览量加载中...

Note

在css文件里添加如下代码！

1
#splashScreen {
2
    position: fixed;
3
    top: 0;
4
    left: 0;
5
    width: 100%;
6
    height: 100%;
7
    background-color: #fff; /* 背景色，可根据需要调整 */
8
    display: flex;
9
    justify-content: center;
10
    align-items: center;
11
    z-index: 9999; /* 确保在最上层 */
12
    animation: fadeOut 1s forwards 1.5s; /* 3秒后开始淡出，持续2秒，总共5秒后消失 */
13
}
14

15
@keyframes spinAndScale {
16
    0% {
17
        transform: rotate(0deg) scale(0.5);
18
        opacity: 0;
19
    }
20
    50% {
21
        transform: rotate(180deg) scale(1.2);
22
        opacity: 1;
23
    }
24
    100% {
25
        transform: rotate(360deg) scale(1);
26
        opacity: 1;
27
    }
28
}
29

30
@keyframes fadeOut {
31
    from { opacity: 1; }
32
    to { opacity: 0; visibility: hidden; }
33
}

Note

然后在index等核心页面的html的body标签最前面中添加如下层

1
<div id="splashScreen">
2
    <img src="images/genshin.jpg"  alt="原神启动">
3
</div>

Note

最后在images中添加原神图片就可以了

备选方案: 可将图片替换成别的这里还有一种旋转特效的在css中换成如下内容即可！

1
#splashScreen {
2
    position: fixed;
3
    top: 0;
4
    left: 0;
5
    width: 100%;
6
    height: 100%;
7
    background-color: #fff; /* 背景色，可根据需要调整 */
8
    display: flex;
9
    justify-content: center;
10
    align-items: center;
11
    z-index: 9999; /* 确保在最上层 */
12
    animation: fadeOut 1s forwards 1.5s; /* 3秒后开始淡出，持续2秒，总共5秒后消失 */
13
}
14

15
/* 旋转动画，同时可以加上缩放 */
16
#splashScreen img {
17
    animation: spinAndScale 3s ease-in-out;
18
}
19

20
@keyframes spinAndScale {
21
    0% {
22
        transform: rotate(0deg) scale(0.5);
23
        opacity: 0;
24
    }
25
    50% {
26
        transform: rotate(180deg) scale(1.2);
27
        opacity: 1;
28
    }
29
    100% {
30
        transform: rotate(360deg) scale(1);
31
        opacity: 1;
32
    }
33
}
34

35
@keyframes fadeOut {
36
    from { opacity: 1; }
37
    to { opacity: 0; visibility: hidden; }
38
}