CSS外发光|极客教程

CSS外发光

在网页设计中，外发光效果是一种常见的装饰效果，可以让元素在页面中更加突出和引人注目。通过CSS的box-shadow属性，我们可以轻松实现各种外发光效果，包括阴影、发光和立体感等。本文将详细介绍如何使用CSS实现外发光效果，并提供多个示例代码供参考。

1. 基本外发光效果

首先，我们来看一个基本的外发光效果示例。通过设置box-shadow属性，我们可以为元素添加一个简单的外发光效果。

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

<div class="box"></div>

在上面的示例中，我们为一个200×200像素的div元素添加了一个10像素的黑色外发光效果，透明度为0.5。可以看到，元素周围出现了一圈黑色的阴影，使得元素看起来更加突出。

2. 多重外发光效果

除了单一的外发光效果，我们还可以为元素添加多重外发光效果，使得元素看起来更加立体和生动。

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5),
              0 0 20px rgba(0, 0, 0, 0.3),
              0 0 30px rgba(0, 0, 0, 0.1);
}

<div class="box"></div>

在上面的示例中，我们为一个200×200像素的div元素添加了三层外发光效果，分别是10像素、20像素和30像素的黑色外发光效果，透明度逐渐减小。这样可以使得元素看起来更加立体和有层次感。

3. 内发光效果

除了外发光效果，我们还可以为元素添加内发光效果，使得元素看起来更加神秘和炫酷。

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

<div class="box"></div>

在上面的示例中，我们为一个200×200像素的div元素添加了一个10像素的黑色内发光效果，透明度为0.5。可以看到，元素内部出现了一圈黑色的阴影，使得元素看起来更加神秘和炫酷。

4. 发光动画效果

除了静态的外发光效果，我们还可以通过CSS动画实现发光效果的动态变化，使得元素看起来更加生动和吸引眼球。

@keyframes glow {
  0% {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
}

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  animation: glow 2s infinite;
}

<div class="box"></div>

在上面的示例中，我们定义了一个名为glow的动画，使得元素的外发光效果在2秒内从10像素到20像素再到10像素不断变化。通过将动画应用到元素上，可以实现发光效果的动态变化，吸引用户的注意力。

5. 鼠标悬停效果

最后，我们来看一个鼠标悬停时外发光效果的示例。通过:hover伪类和transition属性，我们可以实现鼠标悬停时元素外发光效果的平滑过渡。

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0);
  transition: box-shadow 0.3s;
}

.box:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}