css制作夜光
使用CSS制作夜光效果
通过CSS的box-shadow和text-shadow属性结合动画，可以模拟夜光效果。以下代码展示两种实现方式：
元素夜光效果（如按钮）
.glow-element {
background-color: #0ff;
width: 100px;
height: 50px;
border-radius: 10px;
animation: glow 2s infinite alternate;
}
@keyframes glow {
from {
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0ff, 0 0 20px #0ff;
}
to {
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0ff, 0 0 40px #0ff;
}
}文字夜光效果
.glow-text {
color: #fff;
font-size: 2rem;
animation: text-glow 1.5s ease-in-out infinite alternate;
}
@keyframes text-glow {
from {
text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #ff00de;
}
to {
text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #ff00de;
}
}增强夜光效果的关键参数
-
颜色选择：冷色调（如蓝/青）更适合夜光效果，使用HSL颜色值可精细控制：
hsl(180, 100%, 50%) -
多重阴影叠加：通过多层阴影增加深度感：
box-shadow: 0 0 5px #fff, 0 0 10px hsl(180, 100%, 70%), 0 0 15px hsl(180, 100%, 50%); -
动画曲线：使用
cubic-bezier()自定义动画节奏：animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
浏览器兼容性处理
针对旧版浏览器添加前缀：
-webkit-animation: glow 2s infinite alternate;
-moz-animation: glow 2s infinite alternate;通过调整阴影模糊半径和颜色透明度，可以实现不同强度的夜光效果。实际应用中建议配合will-change: box-shadow;优化性能。
