zzz480.github.io/styles.css at main · zhangminmim/zzz480.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
/* 全局样式 */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, #FFDD93, #FFE29F); /* 明亮的黄色渐变背景 */
    color: #333; /* 使用深灰色文字 */
    line-height: 1.6;
}

/* 导航栏样式 */
.navbar {
    background-color: rgba(255, 204, 102, 0.9); /* 浅橙色半透明背景 */
    color: #333; /* 深灰色文字 */
    padding: 15px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    animation: fadeIn 2s forwards;
}

.navbar h1 {
    margin: 0;
    font-weight: 500;
}

.navbar ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.navbar ul li {
    margin: 0 15px;
}

.navbar ul li a {
    color: #333; /* 深灰色文字 */
    text-decoration: none;
    font-weight: 500;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

.navbar ul li a:hover {
    background-color: rgba(255, 179, 71, 0.5); /* 悬停时的浅橙色背景 */
}

/* 主页部分 */
.hero-section {
    padding: 120px 20px;
    text-align: center;
    background: rgba(255, 239, 193, 0.8); /* 柔和的黄色背景 */
    animation: slideIn 1.5s ease-in-out forwards;
}

/* 各部分的基本样式 */
section {
    padding: 40px;
    margin: 20px 0;
    background-color: rgba(255, 255, 224, 0.8); /* 浅黄色背景 */
    border-radius: 10px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
}

/* 当section进入视口时添加的动画效果 */
section.animated {
    opacity: 1;
    transform: translateY(0);
}

/* 技能部分的网格布局 */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.skill-card {
    background-color: rgba(255, 229, 204, 0.9); /* 柔和的橙色背景 */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease;
}

.skill-card:hover {
    transform: scale(1.05);
}

/* 项目部分悬停效果 */
.project {
    background-color: rgba(255, 229, 204, 0.9); /* 柔和的橙色背景 */
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.project:hover {
    transform: scale(1.05);
}

/* 联系方式链接悬停效果 */
#contact a {
    color: #FF8C00; /* 橙色链接 */
    text-decoration: none;
    transition: color 0.3s ease;
}

#contact a:hover {
    color: #FF4500; /* 深橙色悬停效果 */
    text-decoration: underline;
}

/* 页脚样式 */
footer {
    text-align: center;
    padding: 20px;
    background-color: rgba(255, 204, 102, 0.9); /* 浅橙色背景 */
    color: #333; /* 深灰色文字 */
    margin-top: 40px;
    opacity: 0;
    animation: fadeIn 2s 1s forwards;
}

/* 渐入动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 滑入动画效果 */
@keyframes slideIn {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* 媒体查询: 适配移动设备 */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
    }
    .navbar ul {
        flex-direction: column;
        align-items: center;
    }
    .hero-section {
        padding: 80px 20px;
    }
}