css3 外发光动画 |less实时转css

.glow-box {
display: inline-block;
padding: 10px;
text-align: center;
color: #fff;
background-color: #333;
box-shadow: 0 0 20px rgba(255,255,255,0.2);
}
.glow-box:hover {
box-shadow: 0 0 40px rgba(255,255,255,0.5);
transition: all 0.5s ease-in-out;
}

以上是实现 CSS3 外发光动画的代码示例。首先，大家创建一个名为 glow-box 的 class，它是一个内联块元素，内部有一个较大的 padding 值，以添加一定的内部间隔。背景颜色设置为 #333，即深色背景。同时，还添加了一个盒子阴影 box-shadow，以实现外发光的效果。

然后，大家在:hover伪类中添加了另一个 box-shadow，但这次的阴影半径更大，以使外发光更加明显。过渡动画效果则通过 transition 属性实现，让外发光变化时具备平滑过渡效果。

在实际运用中，大家可以将 .glow-box class 应用于网页中的各类元素（如按钮、导航栏等），让它们都具备外发光效果。同时也可以视具体需求修改代码，以实现更加个性化的效果。