Skip to content

Commit f81e278

Browse files
ccwmoranccwmoran
authored
网页代码
byMorgan
1 parent d996dd2 commit f81e278

File tree

1 file changed

+131
-7
lines changed

1 file changed

+131
-7
lines changed

‎index.html‎

Lines changed: 131 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,24 @@
3535
}
3636
body {
3737
min-height: 100vh;
38-
background-color: #ffffff;
38+
background: linear-gradient(135deg, #ffffff 0%, #ffffff 30%, #a5d296 70%, #5ac05c 100%);
39+
background-size: 400% 400%;
40+
animation: gradientMove 15s ease infinite;
3941
color: #252525;
4042
overflow-x: hidden;
4143
transition: background-color 0.3s;
4244
}
45+
@keyframes gradientMove {
46+
0% {
47+
background-position: 0% 50%;
48+
}
49+
50% {
50+
background-position: 100% 50%;
51+
}
52+
100% {
53+
background-position: 0% 50%;
54+
}
55+
}
4356
.page {
4457
opacity: 0;
4558
transform: translateY(20px);
@@ -142,11 +155,13 @@
142155
color: #252525;
143156
margin-bottom: 8px;
144157
line-height: 1.2;
158+
text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
145159
}
146160
.home-subtitle {
147161
font-size: 1.5rem;
148-
color: #a5d296;
162+
color: #5ac05c;
149163
font-weight: 500;
164+
text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
150165
}
151166
.announcements-container {
152167
display: flex;
@@ -209,6 +224,7 @@
209224
text-align: center;
210225
color: #252525;
211226
margin-bottom: 48px;
227+
text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
212228
}
213229
.works-page, .contact-page, .collaboration-page, .service-page {
214230
padding-top: 72px;
@@ -528,10 +544,77 @@
528544
.copy-notification.show {
529545
opacity: 1;
530546
}
547+
548+
/* 动态渐变背景的额外样式 */
549+
.dynamic-background {
550+
position: fixed;
551+
top: 0;
552+
left: 0;
553+
width: 100%;
554+
height: 100%;
555+
z-index: -1;
556+
opacity: 0.8;
557+
}
558+
559+
.gradient-blob {
560+
position: absolute;
561+
border-radius: 50%;
562+
filter: blur(60px);
563+
opacity: 0.5;
564+
}
565+
566+
.blob-1 {
567+
width: 300px;
568+
height: 300px;
569+
background: linear-gradient(135deg, #a5d296 0%, #5ac05c 100%);
570+
top: 10%;
571+
left: 10%;
572+
animation: float 25s ease-in-out infinite;
573+
}
574+
575+
.blob-2 {
576+
width: 250px;
577+
height: 250px;
578+
background: linear-gradient(135deg, #5ac05c 0%, #ffffff 100%);
579+
top: 60%;
580+
right: 15%;
581+
animation: float 30s ease-in-out infinite reverse;
582+
}
583+
584+
.blob-3 {
585+
width: 200px;
586+
height: 200px;
587+
background: linear-gradient(135deg, #ffffff 0%, #a5d296 100%);
588+
bottom: 20%;
589+
left: 20%;
590+
animation: float 35s ease-in-out infinite;
591+
}
592+
593+
@keyframes float {
594+
0%, 100% {
595+
transform: translate(0, 0) scale(1);
596+
}
597+
25% {
598+
transform: translate(30px, 50px) scale(1.1);
599+
}
600+
50% {
601+
transform: translate(-20px, 30px) scale(0.9);
602+
}
603+
75% {
604+
transform: translate(40px, -20px) scale(1.05);
605+
}
606+
}
531607
</style>
532608
</head>
533609

534610
<body>
611+
<!-- 动态渐变背景 -->
612+
<div class="dynamic-background">
613+
<div class="gradient-blob blob-1"></div>
614+
<div class="gradient-blob blob-2"></div>
615+
<div class="gradient-blob blob-3"></div>
616+
</div>
617+
535618
<nav class="sticky-nav">
536619
<div class="nav-container">
537620
<div class="nav-content">
@@ -664,11 +747,11 @@ <h3 class="card-title">积木扩展</h3>
664747
</li>
665748
<li class="card-list-item">
666749
<span class="card-list-bullet"></span>
667-
下载指定文件
750+
文件下载
668751
</li>
669752
<li class="card-list-item">
670753
<span class="card-list-bullet"></span>
671-
跳转至站外网页
754+
网页跳转
672755
</li>
673756
<li class="card-list-item">
674757
<span class="card-list-bullet"></span>
@@ -758,10 +841,10 @@ <h3 class="card-title">慕然科技的Scratch积木扩展开发教程</h3>
758841
<div class="card-icon">
759842
<div class="card-dot"></div>
760843
</div>
761-
<h3 class="card-title">慕然科技Scratch积木扩展库</h3>
844+
<h3 class="card-title">慕然科技官方文库</h3>
762845
</div>
763-
<p class="card-note">丰富、实用的开源积木扩展</p>
764-
<a href="https://ccwmoran.github.io/code/" target="_blank" class="service-btn encode-btn external-link" style="display: block; text-align: center; margin-top: 16px;">访问代码库</a>
846+
<p class="card-note">官方文档和资源库</p>
847+
<a href="https://kejicx.github.io/doc/" target="_blank" class="service-btn encode-btn external-link" style="display: block; text-align: center; margin-top: 16px;">访问文库</a>
765848
</div>
766849
</div>
767850
</div>
@@ -986,6 +1069,47 @@ <h3 class="modal-title">跳转确认</h3>
9861069
randomEmoji.style.marginLeft = '8px';
9871070
randomEmoji.style.display = 'inline-block';
9881071

1072+
// 动态生成随机渐变背景
1073+
function generateRandomGradient() {
1074+
const colors = ['#ffffff', '#a5d296', '#5ac05c'];
1075+
const gradientTypes = ['linear-gradient', 'radial-gradient'];
1076+
const gradientType = gradientTypes[Math.floor(Math.random() * gradientTypes.length)];
1077+
1078+
let gradientString;
1079+
if (gradientType === 'linear-gradient') {
1080+
const angle = Math.floor(Math.random() * 360);
1081+
const color1 = colors[Math.floor(Math.random() * colors.length)];
1082+
const color2 = colors[Math.floor(Math.random() * colors.length)];
1083+
const color3 = colors[Math.floor(Math.random() * colors.length)];
1084+
gradientString = `${gradientType}(${angle}deg, ${color1} 0%, ${color2} 50%, ${color3} 100%)`;
1085+
} else {
1086+
const shape = Math.random() > 0.5 ? 'circle' : 'ellipse';
1087+
const color1 = colors[Math.floor(Math.random() * colors.length)];
1088+
const color2 = colors[Math.floor(Math.random() * colors.length)];
1089+
gradientString = `${gradientType}(${shape} at ${Math.floor(Math.random() * 100)}% ${Math.floor(Math.random() * 100)}%, ${color1} 0%, ${color2} 100%)`;
1090+
}
1091+
1092+
return gradientString;
1093+
}
1094+
1095+
// 应用随机渐变背景
1096+
const dynamicBackground = document.querySelector('.dynamic-background');
1097+
if (dynamicBackground) {
1098+
// 随机调整渐变斑点的位置和大小
1099+
const blobs = document.querySelectorAll('.gradient-blob');
1100+
blobs.forEach(blob => {
1101+
const size = Math.floor(Math.random() * 200) + 150;
1102+
blob.style.width = `${size}px`;
1103+
blob.style.height = `${size}px`;
1104+
blob.style.top = `${Math.floor(Math.random() * 80)}%`;
1105+
blob.style.left = `${Math.floor(Math.random() * 80)}%`;
1106+
1107+
// 随机动画持续时间
1108+
const duration = Math.floor(Math.random() * 20) + 20;
1109+
blob.style.animationDuration = `${duration}s`;
1110+
});
1111+
}
1112+
9891113
// 初始页面显示
9901114
setTimeout(() => {
9911115
document.querySelector('.page.active').classList.add('active');

0 commit comments

Comments
 (0)