霓雨浮梦

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

Sun, 05 Oct 2025 00:00:00 GMT

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
}

展开收起

本文将在后续进行完善，感谢支持！(/(°∞°))

教大家一个给个人网站中添加变动标题的方法

Sun, 21 Sep 2025 00:00:00 GMT

Note

将如下脚本代码插入到head区域即可实现！

1
var originTitle = document.title,  titleTime;
2
document.addEventListener('visibilitychange',  function() {
3
    if (document.hidden)  {
4
        document.title  = "Σ(っ °Д °;)っ 页面崩溃啦！";
5
    } else {
6
        document.title  = "(≧∇≦)ﾉ 欢迎回来~";
7
        clearTimeout(titleTime);
8
        titleTime = setTimeout(function() {
9
            document.title  = originTitle;
10
        }, 2000); // 2秒后恢复原标题
11
    }
12
});