使用HTML和CSS为图片添加发光效果

使用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:

使用HTML和CSS为图片添加发光效果

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:

使用HTML和CSS为图片添加发光效果

示例代码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:

使用HTML和CSS为图片添加发光效果

示例代码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:

使用HTML和CSS为图片添加发光效果

示例代码4:动态发光效果

为了创建一个动态的发光效果,我们可以使用CSS动画。以下是一个示例,展示了如何使用@keyframesanimation属性来创建一个循环的发光动画。

<!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:

使用HTML和CSS为图片添加发光效果

示例代码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:

使用HTML和CSS为图片添加发光效果

示例代码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:

使用HTML和CSS为图片添加发光效果

示例代码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:

使用HTML和CSS为图片添加发光效果

示例代码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:

使用HTML和CSS为图片添加发光效果

示例代码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:

使用HTML和CSS为图片添加发光效果

示例代码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为图片添加发光效果

以上示例代码展示了如何使用HTML和CSS为图片添加不同类型的发光效果。通过调整box-shadow属性和使用CSS动画,我们可以创建出各种各样的视觉效果,从而增强网页的视觉吸引力。在实际应用中,你可以根据自己的设计需求调整这些参数,创造出独特的发光效果。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程