极客教程使用HTML和CSS为图片添加发光效果
参考： Apply Glowing Effect to the Image using HTML and CSS
在网页设计中，为图片添加发光效果是一种常见的视觉增强技术。这种效果可以通过HTML和CSS实现，不需要使用JavaScript或其他脚本语言。在本文中，我们将详细介绍如何使用HTML和CSS为图片添加发光效果，并提供10-20个示例代码，帮助你理解和实践这一技术。
基础HTML结构
在开始之前，我们需要创建一个基础的HTML结构，用于放置我们的图片。以下是一个简单的HTML骨架，我们将在此基础上添加CSS样式来实现发光效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发光效果示例 - how2html.com</title>
<style>
/* 我们将在这里添加CSS样式 */
</style>
</head>
<body>
<div class="image-container">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="发光效果图片">
</div>
</body>
</html>
Output:
CSS发光效果
为了创建发光效果，我们将使用CSS的box-shadow属性。这个属性允许我们在元素的框架周围添加一个或多个阴影，从而产生发光的视觉效果。
示例代码1：基础发光效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础发光效果 - how2html.com</title>
<style>
.image-container {
display: inline-block;
padding: 10px;
}
.image-container img {
width: 300px;
height: auto;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="基础发光效果图片">
</div>
</body>
</html>
Output:
示例代码2：改变发光颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改变发光颜色 - how2html.com</title>
<style>
.image-container {
display: inline-block;
padding: 10px;
}
.image-container img {
width: 300px;
height: auto;
box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="改变发光颜色图片">
</div>
</body>
</html>
Output:
示例代码3：多重发光效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多重发光效果 - how2html.com</title>
<style>
.image-container {
display: inline-block;
padding: 10px;
}
.image-container img {
width: 300px;
height: auto;
box-shadow: 0 0 10px rgba(255, 0, 0, 0.8),
0 0 20px rgba(0, 255, 0, 0.7),
0 0 30px rgba(0, 0, 255, 0.6);
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="多重发光效果图片">
</div>
</body>
</html>
Output:
示例代码4：动态发光效果
为了创建一个动态的发光效果，我们可以使用CSS动画。以下是一个示例，展示了如何使用@keyframes和animation属性来创建一个循环的发光动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态发光效果 - how2html.com</title>
<style>
@keyframes glowing {
0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.8); }
50% { box-shadow: 0 0 20px rgba(255, 255, 255, 1); }
100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.8); }
}
.image-container {
display: inline-block;
padding: 10px;
}
.image-container img {
width: 300px;
height: auto;
animation: glowing 2s infinite;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="动态发光效果图片">
</div>
</body>
</html>
Output:
示例代码5：发光效果的暂停和恢复
我们可以通过CSS的:hover伪类来控制鼠标悬停时发光效果的暂停和恢复。以下是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发光效果的暂停和恢复 - how2html.com</title>
<style>
@keyframes glowing {
0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.8); }
50% { box-shadow: 0 0 20px rgba(255, 255, 255, 1); }
100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.8); }
}
.image-container {
display: inline-block;
padding: 10px;
}
.image-container img {
width: 300px;
height: auto;
animation: glowing 2s infinite;
}
.image-container img:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="发光效果的暂停和恢复图片">
</div>
</body>
</html>
Output:
示例代码6：自定义发光动画
我们可以自定义发光动画的参数，比如持续时间、延迟、迭代次数等。以下是一个自定义动画参数的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义发光动画 - how2html.com</title>
<style>
@keyframes glowing {
0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.8); }
50% { box-shadow: 0 0 25px rgba(255, 255, 255, 1); }
100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.8); }
}
.image-container {
display: inline-block;
padding: 10px;
}
.image-container img {
width: 300px;
height: auto;
animation: glowing 3s ease-in-out 0s infinite;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="自定义发光动画图片">
</div>
</body>
</html>
Output:
示例代码7：发光阴影的扩散和模糊
我们可以通过调整box-shadow属性中的扩散半径和模糊距离来改变发光阴影的外观。以下是一个调整这些参数的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发光阴影的扩散和模糊 - how2html.com</title>
<style>
.image-container {
display: inline-block;
padding: 10px;
}
.image-container img {
width: 300px;
height: auto;
box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.8),
0 0 15px 5px rgba(255, 255, 255, 0.6),
0 0 25px 10px rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="发光阴影的扩散和模糊图片">
</div>
</body>
</html>
Output:
示例代码8：发光边框效果
除了为图片添加发光效果，我们还可以为图片的边框添加发光效果。以下是一个发光边框效果的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发光边框效果 - how2html.com</title>
<style>
.image-container {
display: inline-block;
padding: 10px;
border: 5px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.image-container img {
width: 300px;
height: auto;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="发光边框效果图片">
</div>
</body>
</html>
Output:
示例代码9：渐变背景发光效果
我们还可以为图片的背景添加一个渐变的发光效果。以下是一个渐变背景发光效果的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变背景发光效果 - how2html.com</title>
<style>
.image-container {
display: inline-block;
padding: 10px;
background: linear-gradient(45deg, rgba(255, 0, 0, 0.8), rgba(0, 255, 0, 0.8), rgba(0, 0, 255, 0.8));
box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}
.image-container img {
width: 300px;
height: auto;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="渐变背景发光效果图片">
</div>
</body>
</html>
Output:
示例代码10：3D发光效果
我们可以通过添加多层阴影来创建一个3D发光效果。以下是一个3D发光效果的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D发光效果 - how2html.com</title>
<style>
.image-container {
display: inline-block;
padding: 10px;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
0 0 10px rgba(255, 255, 255, 0.8),
0 0 15px rgba(255, 255, 255, 0.8),
0 0 20px rgba(255, 0, 0, 0.8),
0 0 35px rgba(255, 0, 0, 0.8),
0 0 40px rgba(255, 0, 0, 0.8),
0 0 50px rgba(255, 0, 0, 0.8),
0 0 75px rgba(255, 0, 0, 0.8);
}
.image-container img {
width: 300px;
height: auto;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="3D发光效果图片">
</div>
</body>
</html>
Output:
以上示例代码展示了如何使用HTML和CSS为图片添加不同类型的发光效果。通过调整box-shadow属性和使用CSS动画，我们可以创建出各种各样的视觉效果，从而增强网页的视觉吸引力。在实际应用中，你可以根据自己的设计需求调整这些参数，创造出独特的发光效果。