使用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动画,我们可以创建出各种各样的视觉效果,从而增强网页的视觉吸引力。在实际应用中,你可以根据自己的设计需求调整这些参数,创造出独特的发光效果。