CSS实用技巧集合：让你的网页更精美

Mon, 05 Feb 2024 14:15:00 +0800

CSS是前端开发中不可或缺的技术，掌握一些实用的CSS技巧能让你的网页脱颖而出。今天分享一些我常用的CSS技巧。

🎨 布局技巧

1. 完美居中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


/* 方法一：Flexbox */
.center-flex {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

/* 方法二：Grid */
.center-grid {
 display: grid;
 place-items: center;
 height: 100vh;
}

/* 方法三：绝对定位 + Transform */
.center-absolute {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

2. 等高列布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


.equal-height-container {
 display: flex;
}

.column {
 flex: 1;
 padding: 20px;
 background: #f5f5f5;
 margin: 0 10px;
}

/* 或使用Grid */
.grid-equal-height {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

3. 粘性页脚

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


body {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

main {
 flex: 1;
}

footer {
 margin-top: auto;
}

✨ 视觉效果

1. 毛玻璃效果

1
2
3
4
5
6
7
8


.glassmorphism {
 background: rgba(255, 255, 255, 0.25);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border-radius: 10px;
 border: 1px solid rgba(255, 255, 255, 0.18);
 box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

2. 渐变文字

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


.gradient-text {
 background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
 background-size: 300% 300%;
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
 0%, 100% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
}

3. 悬浮卡片效果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.hover-card {
 transition: all 0.3s ease;
 transform: translateY(0);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hover-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

🔥 动画效果

1. 加载动画

 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


/* 旋转加载器 */
.loader {
 width: 40px;
 height: 40px;
 border: 4px solid #f3f3f3;
 border-top: 4px solid #3498db;
 border-radius: 50%;
 animation: spin 1s linear infinite;
}

@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

/* 脉冲加载器 */
.pulse-loader {
 width: 20px;
 height: 20px;
 background-color: #3498db;
 border-radius: 50%;
 animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
 0%, 100% {
 transform: scale(0);
 opacity: 1;
 }
 50% {
 transform: scale(1);
 opacity: 0.7;
 }
}

2. 打字机效果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


.typewriter {
 overflow: hidden;
 border-right: 2px solid #333;
 white-space: nowrap;
 margin: 0 auto;
 animation: 
 typing 3.5s steps(40, end),
 blink-caret 0.75s step-end infinite;
}

@keyframes typing {
 from { width: 0; }
 to { width: 100%; }
}

@keyframes blink-caret {
 from, to { border-color: transparent; }
 50% { border-color: #333; }
}

3. 波浪动画

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


.wave {
 position: relative;
 overflow: hidden;
}

.wave::before {
 content: '';
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
 animation: wave 2s linear infinite;
}

@keyframes wave {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

📱 响应式技巧

1. 流体字体大小

1
2
3
4
5
6
7
8


.fluid-typography {
 font-size: clamp(1rem, 2.5vw, 2rem);
}

/* 更精确的控制 */
.responsive-text {
 font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1920 - 320)));
}

2. 容器查询

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


.card-container {
 container-type: inline-size;
}

@container (min-width: 300px) {
 .card {
 display: flex;
 align-items: center;
 }
 
 .card-image {
 width: 100px;
 height: 100px;
 }
}

3. 响应式图片

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


.responsive-image {
 width: 100%;
 height: auto;
 object-fit: cover;
 aspect-ratio: 16/9;
}

/* 艺术指导 */
.hero-image {
 width: 100%;
 height: 50vh;
 object-fit: cover;
 object-position: center top;
}

@media (max-width: 768px) {
 .hero-image {
 object-position: center center;
 height: 30vh;
 }
}

🛠️ 实用工具类

1. 文本处理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


/* 单行省略 */
.text-ellipsis {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* 多行省略 */
.text-clamp {
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

/* 防止文本选择 */
.no-select {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

2. 滚动条样式

 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


/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
 width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
 background: #888;
 border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
 background: #555;
}

/* 隐藏滚动条但保持功能 */
.hide-scrollbar {
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
 display: none; /* Chrome, Safari and Opera */
}

3. 焦点管理

 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


/* 改善可访问性的焦点样式 */
.focus-visible {
 outline: none;
}

.focus-visible:focus-visible {
 outline: 2px solid #4285f4;
 outline-offset: 2px;
}

/* 跳转链接 */
.skip-link {
 position: absolute;
 top: -40px;
 left: 6px;
 background: #000;
 color: #fff;
 padding: 8px;
 text-decoration: none;
 transition: top 0.3s;
}

.skip-link:focus {
 top: 6px;
}

🎯 性能优化

1. 硬件加速

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.gpu-accelerated {
 transform: translateZ(0);
 /* 或 */
 will-change: transform;
}

/* 注意：用完后要移除will-change */
.animation-finished {
 will-change: auto;
}

2. 减少重排重绘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


/* 使用transform代替改变position */
.move-element {
 transform: translateX(100px);
 /* 而不是 left: 100px; */
}

/* 使用opacity代替visibility */
.fade-element {
 opacity: 0;
 /* 而不是 visibility: hidden; */
}

🧪 实验性功能

1. CSS Houdini

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


/* 注册自定义属性 */
@property --gradient-angle {
 syntax: '<angle>';
 initial-value: 0deg;
 inherits: false;
}

.animated-gradient {
 background: conic-gradient(from var(--gradient-angle), #ff6b6b, #4ecdc4, #45b7d1, #ff6b6b);
 animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
 to {
 --gradient-angle: 360deg;
 }
}

2. CSS Grid子网格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


.subgrid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

.subgrid-item {
 display: grid;
 grid-template-rows: subgrid;
 grid-row: span 3;
}

📋 实践建议

1. CSS组织结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


/* 使用BEM命名规范 */
.card {
 /* 块 */
}

.card__header {
 /* 元素 */
}

.card--featured {
 /* 修饰符 */
}

2. CSS变量的妙用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


:root {
 --primary-color: #3498db;
 --secondary-color: #2ecc71;
 --font-size-base: 16px;
 --spacing-unit: 8px;
}

.component {
 color: var(--primary-color);
 font-size: calc(var(--font-size-base) * 1.2);
 padding: calc(var(--spacing-unit) * 2);
}

/* 主题切换 */
[data-theme="dark"] {
 --primary-color: #5dade2;
 --background-color: #2c3e50;
}

3. 调试技巧

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


/* 临时边框调试 */
* {
 outline: 1px solid red;
}

/* 网格调试 */
.debug-grid {
 background-image: 
 linear-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
 background-size: 20px 20px;
}

💡 总结

这些CSS技巧涵盖了日常开发中的常见需求：

响应式设计 on Zampo Blog

CSS实用技巧集合：让你的网页更精美

🎨 布局技巧

1. 完美居中

2. 等高列布局

3. 粘性页脚

✨ 视觉效果

1. 毛玻璃效果

2. 渐变文字

3. 悬浮卡片效果

🔥 动画效果

1. 加载动画

2. 打字机效果

3. 波浪动画

📱 响应式技巧

1. 流体字体大小

2. 容器查询

3. 响应式图片

🛠️ 实用工具类

1. 文本处理

2. 滚动条样式

3. 焦点管理

🎯 性能优化

1. 硬件加速

2. 减少重排重绘

🧪 实验性功能

1. CSS Houdini

2. CSS Grid子网格

📋 实践建议

1. CSS组织结构

2. CSS变量的妙用

3. 调试技巧

💡 总结