CSS3文本阴影效果实现
下面我将创建一个展示各种CSS3文本阴影效果的页面，包含多种样式示例和代码实现。
设计思路
- 创建具有视觉吸引力的标题区域
- 提供多种文本阴影效果实例
- 显示对应的CSS代码以供参考
- 添加交互元素让用户自定义效果
实现代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3文本阴影效果大全</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: #fff;
min-height: 100vh;
padding: 40px 20px;
}
.container {
max-width: 1100px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 50px;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 3.5rem;
margin-bottom: 15px;
text-shadow:
0 0 10px rgba(255, 255, 255, 0.8),
0 0 20px rgba(255, 215, 0, 0.7),
0 0 30px rgba(255, 140, 0, 0.6);
position: relative;
display: inline-block;
}
h1::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 4px;
background: linear-gradient(90deg, transparent, gold, transparent);
border-radius: 2px;
}
.subtitle {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
opacity: 0.9;
line-height: 1.6;
}
.shadow-examples {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.example {
background: rgba(20, 20, 30, 0.7);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.example:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.example-title {
font-size: 2.5rem;
margin-bottom: 20px;
text-align: center;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.example-code {
background: rgba(15, 15, 25, 0.8);
border-radius: 8px;
padding: 15px;
font-family: monospace;
font-size: 0.95rem;
line-height: 1.5;
flex-grow: 1;
overflow-x: auto;
}
.example-desc {
margin-top: 15px;
font-size: 0.95rem;
opacity: 0.8;
}
.shadow-customizer {
background: rgba(20, 20, 30, 0.7);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
margin-bottom: 50px;
}
.customizer-title {
text-align: center;
font-size: 2rem;
margin-bottom: 30px;
text-shadow: 0 2px 10px rgba(0, 200, 255, 0.7);
}
.controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.control-group {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 8px;
font-weight: 600;
}
input[type="range"] {
width: 100%;
}
.color-picker {
display: flex;
gap: 10px;
align-items: center;
}
input[type="color"] {
width: 40px;
height: 40px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.preview {
text-align: center;
padding: 40px;
margin: 20px 0;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
font-size: 3rem;
font-weight: bold;
}
.code-output {
background: rgba(15, 15, 25, 0.8);
border-radius: 8px;
padding: 20px;
font-family: monospace;
font-size: 1.1rem;
text-align: center;
}
footer {
text-align: center;
padding: 20px;
font-size: 0.9rem;
opacity: 0.8;
}
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
.preview {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS3 文本阴影效果</h1>
<p class="subtitle">探索各种引人注目的文本阴影技术，学习如何实现这些效果并创建您自己的自定义样式。</p>
</header>
<section class="shadow-examples">
<div class="example">
<div class="example-title" style="text-shadow: 3px 3px 0px #ff6b6b;">简单投影</div>
<div class="example-code">text-shadow: 3px 3px 0px #ff6b6b;</div>
<p class="example-desc">基本投影效果，向右下角偏移，无模糊效果。</p>
</div>
<div class="example">
<div class="example-title" style="text-shadow: 0 0 10px #00eeff, 0 0 20px #00b3ff;">霓虹灯效果</div>
<div class="example-code">text-shadow: 0 0 10px #00eeff, 0 0 20px #00b3ff;</div>
<p class="example-desc">多层阴影创造发光效果，常用于霓虹灯风格设计。</p>
</div>
<div class="example">
<div class="example-title" style="text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; color: #2c3e50;">文字描边</div>
<div class="example-code">text-shadow: -1px -1px 0 white, <br>1px -1px 0 white, <br>-1px 1px 0 white, <br>1px 1px 0 white;</div>
<p class="example-desc">使用四个阴影围绕文字创建描边效果。</p>
</div>
<div class="example">
<div class="example-title" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.5), 4px 4px 6px rgba(0,0,0,0.3), 6px 6px 8px rgba(0,0,0,0.15);">3D立体效果</div>
<div class="example-code">text-shadow: 2px 2px 4px rgba(0,0,0,0.5),<br>4px 4px 6px rgba(0,0,0,0.3),<br>6px 6px 8px rgba(0,0,0,0.15);</div>
<p class="example-desc">多层阴影营造出立体感和深度。</p>
</div>
<div class="example">
<div class="example-title" style="text-shadow: 0 14px 10px rgba(0,0,0,0.15), 0 24px 2px rgba(0,0,0,0.1), 0 34px 30px rgba(0,0,0,0.1);">长投影</div>
<div class="example-code">text-shadow: 0 14px 10px rgba(0,0,0,0.15),<br>0 24px 2px rgba(0,0,0,0.1),<br>0 34px 30px rgba(0,0,0,0.1);</div>
<p class="example-desc">柔和的垂直投影，创造漂浮文字效果。</p>
</div>
<div class="example">
<div class="example-title" style="text-shadow: 5px 5px 0px #ee5253, 10px 10px 0px #341f97; color: #ff9ff3;">多彩层叠</div>
<div class="example-code">text-shadow: 5px 5px 0px #ee5253, <br>10px 10px 0px #341f97;</div>
<p class="example-desc">多层不同颜色的阴影创建有趣的视觉效果。</p>
</div>
</section>
<section class="shadow-customizer">
<h2 class="customizer-title">自定义文本阴影</h2>
<div class="controls">
<div class="control-group">
<label for="h-offset">水平偏移 (px)</label>
<input type="range" id="h-offset" min="-20" max="20" value="5">
</div>
<div class="control-group">
<label for="v-offset">垂直偏移 (px)</label>
<input type="range" id="v-offset" min="-20" max="20" value="5">
</div>
<div class="control-group">
<label for="blur">模糊半径 (px)</label>
<input type="range" id="blur" min="0" max="20" value="3">
</div>
<div class="control-group">
<label for="color">阴影颜色</label>
<div class="color-picker">
<input type="color" id="color" value="#ff6b6b">
<span id="color-value">#ff6b6b</span>
</div>
</div>
</div>
<div class="preview" id="custom-preview">自定义文本阴影</div>
<div class="code-output">
text-shadow: <span id="code-output">5px 5px 3px #ff6b6b</span>;
</div>
</section>
<footer>
<p>CSS3 文本阴影效果展示 | 使用 text-shadow 属性创建视觉吸引力</p>
<p>text-shadow 语法：text-shadow: h-shadow v-shadow blur-radius color;</p>
</footer>
</div>
<script>
// 获取DOM元素
const hOffset = document.getElementById('h-offset');
const vOffset = document.getElementById('v-offset');
const blur = document.getElementById('blur');
const color = document.getElementById('color');
const colorValue = document.getElementById('color-value');
const customPreview = document.getElementById('custom-preview');
const codeOutput = document.getElementById('code-output');
// 更新阴影颜色值显示
color.addEventListener('input', function() {
colorValue.textContent = this.value;
updateShadow();
});
// 添加事件监听器
[hOffset, vOffset, blur].forEach(input => {
input.addEventListener('input', updateShadow);
});
// 更新阴影效果
function updateShadow() {
const h = hOffset.value + 'px';
const v = vOffset.value + 'px';
const b = blur.value + 'px';
const c = color.value;
const shadowValue = `${h} ${v} ${b} ${c}`;
customPreview.style.textShadow = shadowValue;
codeOutput.textContent = shadowValue;
}
// 初始化
updateShadow();
</script>
</body>
</html>
功能说明
这个页面展示了多种CSS3文本阴影效果，包括：
基本效果展示区：提供了6种不同的文本阴影示例
- 简单投影
- 霓虹灯效果
- 文字描边
- 3D立体效果
- 长投影效果
- 多彩层叠效果
自定义工具：用户可以实时调整以下参数：
- 水平偏移（左右移动阴影）
- 垂直偏移（上下移动阴影）
- 模糊半径（控制阴影的模糊程度）
- 阴影颜色（使用颜色选择器）
代码输出：实时显示当前阴影效果的CSS代码
设计特点
- 使用渐变背景创建现代化视觉效果
- 卡片式布局确保在各种设备上都能良好显示
- 悬特效提升交互体验
- 响应式设计适应不同屏幕尺寸
- 实时预览功能便于学习和测试
这个页面既展示了CSS3的强大文本阴影功能，也提供了实用的交互工具让用户可以立即体验各种效果。