202410041334
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Color Text</title>
<style>
.fixed-text {
position: fixed;
bottom: 0; /* 固定在底部 */
left: 0; /* 固定在右边 */
width: 2.0em; /* 设置宽度 */
writing-mode: vertical-rl; /* 竖向排列文字 */
text-align: center; /* 文字居中对齐 */
font-size: 2.7em; /* 字体大小可根据需要调整 */
z-index: 1000; /* 确保文字显示在最上层 */
# background-color: rgba(255, 255, 255, 0.8); /* 背景颜色，可选 */
padding: 10px;
}
.fixed-text a {
text-decoration: none;
color: #000; /* 初始文字颜色 */
animation: colorChange 10s infinite; /* 动态颜色变化动画 */
}
/* 定义颜色变化的关键帧 */
@keyframes colorChange {
0% { color: #000; } /* 黑色 */
10% { color: #FF5733; } /* 橙色 */
20% { color: #33FF57; } /* 绿色 */
30% { color: #3357FF; } /* 蓝色 */
40% { color: #FF33A8; } /* 粉色 */
50% { color: #3357FF; } /* 蓝色 */
60% { color: #33FF57; } /* 绿色 */
70% { color: #FF5733; } /* 橙色 */
}
</style>
</head>
<body>
<div class="fixed-text">
<a target="_blank" href="https://icp.gov.moe/?keyword=20240707" rel="noreferrer">萌えICP備20240707号</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh; /* 设置页面高度为视口高度 */
}
.fixed-bg {
position: fixed;
right: 7vw;
bottom: -3.33vw;
width: 75.00vw; /* 宽度设置为浏览器宽度的三分之一 */
height: auto; /* 高度根据宽度自动调整 */
z-index: -1; /* 将其放在页面背景下方 */
}
</style>
</head>
<body>
<!-- 插入图片 -->
<img src="https://acgrip.fun/assets/files/2024-10-04/1728019499-538588-madoka000004.webp" class="fixed-bg" alt="背景图片">
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moe-Counter</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh; /* 设置页面高度为视口高度 */
}
.fixed-moe {
position: fixed;
left: 3vw;
bottom: 0;
width: 22.22vw; /* 宽度设置为浏览器宽度的三分之一 */
height: auto; /* 高度根据宽度自动调整 */
z-index: -1; /* 将其放在页面背景下方 */
}
</style>
</head>
<body>
<!-- 插入图片 -->
<img src="https://acgrip.fun/2233/MoeCounter" class="fixed-moe" alt="Moe-Counter">
</body>
</html>