极简个人残月拟态引导页
演示图如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="残月引导页"/>
<meta name="description"content="个人引导页，残月个人引导页">
<meta name="author"content="1771245847">
<title>残月引导页</title>
<link rel="shortcut icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
/* 通用样式 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
/* 外层容器样式 */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 拟态框样式 */
.modal {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10px;
background-color: #e3f2f6;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
padding: 40px;
max-width: 600px;
width: 80vw;
border: 5px solid #ffffff;
border-color: rgba(0, 0, 0, 0.1);
}
/* 头像样式 */
.avatar {
width: 120px;
height: 120px;
margin-bottom: 20px;
border-radius: 50%;
background-image: url(https://tianquan.gtimg.cn/face/item/6486/medium.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.4));
}
/* 名称样式 */
.name {
text-align: center;
margin-bottom: 20px;
font-size: 28px;
font-weight: 700;
color: #565656;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
}
/* 下载按钮样式 */
.download-btn {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 60px;
margin-top: 20px;
margin-bottom: 40px;
border: none;
border-radius: 30px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
background-image: linear-gradient(to bottom right, #b5a0f7, #8db6ff);
color: #ffffff;
font-size: 20px;
font-weight: 700;
text-align: center;
line-height: 60px;
cursor: pointer;
outline: none;
transition: transform 0.2s ease-out;
}
/* 下载按钮悬停时的样式 */
.download-btn:hover {
transform: scale(1.05);
}
/* 安卓下载按钮样式 */
.android-btn {
background-image: linear-gradient(to bottom right, #b5a0f7, #8db6ff);
}
/* 苹果下载按钮样式 */
.apple-btn {
background-color: #4dd0e1;
color: #ffffff;
}
/* 苹果下载按钮悬停时的样式 */
.apple-btn:hover {
background-color: #26c6da;
}
/* 描述样式 */
.description {
margin: 20px 0;
font-size: 16px;
color: #666;
text-align: center;
}
/* 其他信息样式 */
.info {
margin-bottom: 40px;
font-size: 16px;
color: #666;
text-align: center;
}
/* 标题样式 */
.title {
margin-bottom: 10px;
font-weight: 700;
}
/* 软件截图样式 */
.screenshot {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
background-image: url(https://upload.jianshu.io/users/upload_avatars/25392849/e532f4c7-d3f7-4dd0-91dc-af5ae5a50af8.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
@media only screen and (max-width: 768px) {
/* 拟态框样式 */
.modal {
padding: 20px;
border: 3px solid #ffffff;
}
/* 头像样式 */
.avatar {
width: 80px;
height: 80px;
margin-bottom: 10px;
}
/* 名称样式 */
.name {
margin-bottom: 10px;
font-size: 20px;
}
/* 描述样式 */
.description {
margin: 10px 0;
font-size: 14px;
}
/* 下载按钮样式 */
.download-btn {
width: 160px;
height: 50px;
font-size: 18px;
line-height: 50px;
margin-top: 10px;
margin-bottom: 20px;
}
/* 其他信息样式 */
.info {
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="modal">
<div class="avatar"></div>
<div class="name">个人引导页</div>
<a href="#" class="download-btn android-btn">待添加</a>
<a href="#" class="download-btn apple-btn">待添加</a>
<div class="screenshot"></div>
<p class="description">
Copyright © 2023 All Rights Reserved
</p>
<div class="info">
<p><span class="title"></span></p>
<p><span class="title"></span></p>
</div>
</div>
</div>
</body>
</html>
②: 再见 代码 演示图: 如下
再见:代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico">
<title>再见</title>
<style>
* { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;
vertical-align: baseline; box-sizing: border-box; color: inherit; } body
{ background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);
height: 100vh; } h1 { font-size: 45vw; text-align: center; position: fixed;
width: 100vw; z-index: 1; color: #ffffff26; text-shadow: 0 0 50px rgba(0,
0, 0, 0.07); top: 50%; -webkit-transform: translateY(-50%); transform:
translateY(-50%); font-family: "Montserrat", monospace; } div { background:
rgba(0, 0, 0, 0); width: 70vw; position: relative; top: 50%; -webkit-transform:
translateY(-50%); transform: translateY(-50%); margin: 0 auto; padding:
30px 30px 10px; box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5); z-index:
3; } P { font-family: "Share Tech Mono", monospace; color: #f5f5f5; margin:
0 0 20px; font-size: 17px; line-height: 1.2; } span { color: #f0c674; }
i { color: #8abeb7; } div a { text-decoration: none; } b { color: #81a2be;
} a.avatar { position: fixed; bottom: 15px; right: -100px; -webkit-animation:
slide 0.5s 4.5s forwards; animation: slide 0.5s 4.5s forwards; display:
block; z-index: 4 } a.avatar img { border-radius: 100%; width: 44px; border:
2px solid white; } @-webkit-keyframes slide { from { right: -100px; -webkit-transform:
rotate(360deg); transform: rotate(360deg); opacity: 0; } to { right: 15px;
-webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; }
} @keyframes slide { from { right: -100px; -webkit-transform: rotate(360deg);
transform: rotate(360deg); opacity: 0; } to { right: 15px; -webkit-transform:
rotate(0deg); transform: rotate(0deg); opacity: 1; } }
</style>
</head>
<body>
<h1>
</h1>
<div>
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
Start The Deletion /*
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
删除成功
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
文件备份自动启用中...
</i>
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
备份失败 ! 仅备份文件碎片...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
文件碎片正在加载...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
加载失败 对不起我们跑路了...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
不要伤心 不要难过...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
或许我们还会再建个站继续骗你 ...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
江湖再见啦 ...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
拜拜了，哈哈哈 ...
</i>
"
</div>
<script>
var str = document.getElementsByTagName('div')[0].innerHTML.toString();
var i = 0;
document.getElementsByTagName('div')[0].innerHTML = "";
setTimeout(function() {
var se = setInterval(function() {
i++;
document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "|";
if (i == str.length) {
clearInterval(se);
document.getElementsByTagName('div')[0].innerHTML = str;
}
}, 30);
}, 0);
</script>
</body>
</html>
本站均来于互联网，请勿用于任何商业用途，仅供学习交流
Copyright © 2023 All Rights Reserved
