当前位置：极客笔记 > HTML > HTML 问答 > 使用HTML和CSS为图片添加发光效果

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

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

参考： Apply Glowing Effect to the Image using HTML and CSS

在网页设计中，为图片添加发光效果可以使页面看起来更加生动和吸引人。本文将详细介绍如何使用HTML和CSS为图片添加发光效果。我们将通过一系列示例代码来展示不同的发光效果，以及如何通过CSS属性来实现它们。

示例1：基础的发光效果

下面的示例展示了如何为一个图片添加基础的发光效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Image Effect</title>
<style>
  .glow {
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }
</style>
</head>
<body>
<div class="glow"></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>Glowing Image Effect with Transition</title>
<style>
  .glow {
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    transition: box-shadow 0.3s ease-in-out;
  }
  .glow:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
  }
</style>
</head>
<body>
<div class="glow"></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>Colorful Glowing Image Effect</title>
<style>
  .glow {
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
  }
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

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

示例4：多重发光效果

通过叠加多个box-shadow，我们可以创建一个多重发光效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Glowing Effect</title>
<style>
  .glow {
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    box-shadow: 
      0 0 10px #fff,
      0 0 20px #fff,
      0 0 30px #f0f,
      0 0 40px #0ff;
  }
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

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

示例5：动态的发光效果

在这个示例中，我们将使用@keyframes来创建一个动态的发光效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Glowing Effect</title>
<style>
  @keyframes glowing {
    0% { box-shadow: 0 0 5px #fff; }
    50% { box-shadow: 0 0 20px #ff0; }
    100% { box-shadow: 0 0 5px #fff; }
  }
  .glow {
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    animation: glowing 2s infinite;
  }
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

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

示例6：发光阴影的内部发光效果

我们可以通过设置inset关键字来使阴影在元素的内部显示，从而创建一个内部发光效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inner Glowing Effect</title>
<style>
  .glow {
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    box-shadow: inset 0 0 10px #fff;
  }
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

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

示例7：发光边框效果

除了发光阴影，我们还可以为图片添加一个发光边框。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Border Effect</title>
<style>
  .glow {
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    border: 5px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  }
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

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

示例8：渐变的发光效果

我们可以使用CSS渐变来创建一个更加复杂的发光效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Glowing Effect</title>
<style>
  .glow {
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    background: linear-gradient(45deg, rgba(255, 0, 0, 0.3), rgba(0, 255, 0, 0.3), rgba(0, 0, 255, 0.3));
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  }
</style>
</head>
<body>
<div class="glow"></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>Glowing Text on Image Effect</title>
<style>
  .glow {
    position: relative;
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
  }
  .glow::after {
    content: 'how2html.com';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 24px;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f0f, 0 0 40px #0ff;
  }
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

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

示例10：响应式的发光效果

为了确保发光效果在不同设备上都能良好展示，我们可以使用媒体查询来调整效果的大小。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Glowing Effect</title>
<style>
  .glow {
    width: 100%;
    max-width: 300px;
    height: auto;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    box-shadow: 0 0 10px #fff;
  }
  @media (min-width: 768px) {
    .glow {
      box-shadow: 0 0 20px #fff;
    }
  }
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

示例11：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 Glowing Effect</title>
<style>
  .glow {
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    box-shadow: 
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 15px #fff,
      0 0 20px #ff2d95,
      0 0 35px #ff2d95,
      0 0 40px #ff2d95,
      0 0 55px #ff2d95,
      0 0 75px #ff2d95;
  }
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

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

示例12：发光效果的暂停和恢复

我们可以使用CSS的:hover伪类和animation-play-state属性来控制动画的暂停和恢复。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Effect Pause and Resume</title>
<style>
  @keyframes glowing {
    0% { box-shadow: 0 0 5px #fff; }
    50% { box-shadow: 0 0 20px #ff0; }
    100% { box-shadow: 0 0 5px #fff; }
  }
  .glow {
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    animation: glowing 2s infinite;
  }
  .glow:hover {
    animation-play-state: paused;
  }
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

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

示例13：发光效果的方向控制

我们可以通过改变box-shadow的水平和垂直偏移来控制发光效果的方向。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Effect Direction Control</title>
<style>
  .glow {
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    box-shadow: 10px 10px 20px #fff;
  }
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

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

示例14：自定义形状的发光效果

我们可以通过使用clip-path来创建自定义形状，并为其添加发光效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Shape Glowing Effect</title>
<style>
  .glow {
    width: 300px;
    height: 200px;
    background-image: url('https://how2html.com/wp-content/themes/dux/img/logo.png');
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: 0 0 15px #fff;
  }
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

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

示例15：发光文字效果

除了图片，我们也可以为文字添加发光效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Text Effect</title>
<style>
  .glow-text {
    font-size: 40px;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f0f, 0 0 40px #0ff;
  }
</style>
</head>
<body>
<div class="glow-text">how2html.com</div>
</body>
</html>

Output:

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

示例16：发光按钮效果

我们可以为按钮添加发光效果，使其在用户交互时更加突出。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Button Effect</title>
<style>
  .glow-button {
    padding: 10px 20px;
    border: none;
    background-color: #111;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 20px #fff;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .glow-button:hover {
    box-shadow: 0 0 40px #fff;
  }
</style>
</head>
<body>
<button class="glow-button">Visit how2html.com</button>
</body>
</html>

Output:

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

示例17：发光图标效果

我们也可以为社交媒体图标或其他网页图标添加发光效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Icons Effect</title>
<style>
  .icon {
    font-size: 30px;
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #f0f, 0 0 20px #0ff;
    margin: 10px;
    cursor: pointer;
  }
</style>
</head>
<body>
<i class="icon">★</i> <!-- Example icon (star) -->
<i class="icon">♥</i> <!-- Example icon (heart) -->
<i class="icon">►</i> <!-- Example icon (play) -->
</body>
</html>

Output:

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

示例18：动态发光效果

我们可以通过CSS动画添加一个动态的发光效果，使元素看起来更加生动。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Glowing Effect</title>
<style>
  @keyframes glow {
    0%, 100% {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f0f, 0 0 40px #0ff;
    }
    50% {
      text-shadow: 0 0 20px #fff, 0 0 40px #f0f, 0 0 60px #f0f, 0 0 80px #0ff;
    }
  }
  .dynamic-glow {
    font-size: 40px;
    color: #fff;
    animation: glow 2s infinite alternate;
  }
</style>
</head>
<body>
<div class="dynamic-glow">Dynamic Glow</div>
</body>
</html>

Output:

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

示例19：发光边框效果

我们可以为元素添加一个发光的边框，以增强其视觉效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Border Effect</title>
<style>
  .glow-border {
    width: 300px;
    height: 200px;
    border: 5px solid #fff;
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #f0f, 0 0 20px #0ff;
    padding: 20px;
    text-align: center;
    line-height: 160px;
    font-size: 24px;
    color: #fff;
  }
</style>
</head>
<body>
<div class="glow-border">Glowing Border</div>
</body>
</html>

Output:

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

示例20：渐变发光效果

我们可以使用CSS渐变和发光效果结合，创建一个独特的视觉效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Glowing Effect</title>
<style>
  .gradient-glow {
    width: 300px;
    height: 200px;
    background: linear-gradient(to right, #ff4b2b, #ff416c);
    box-shadow: 0 0 10px #fff, 0 0 20px #ff4b2b, 0 0 30px #ff416c, 0 0 40px #ff416c;
    color: #fff;
    padding: 20px;
    text-align: center;
    line-height: 160px;
    font-size: 24px;
  }
</style>
</head>
<body>
<div class="gradient-glow">Gradient Glow</div>
</body>
</html>

Output:

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

这些示例展示了如何使用HTML和CSS来创建各种发光效果，可以应用于文本、图片、按钮、图标等多种元素，增强网页的视觉吸引力。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程