先上效果
🌟灯光效果能够为场景带来生命力和动感。将这种效果应用到网页设计中，CSS酷炫灯光效果能够创造出令人惊叹的视觉效果，增强用户界面的吸引力和现代感。本文将探讨如何使用CSS来实现各种灯光效果，从简单的发光到复杂的光线动画，为网页设计带来前所未有的视觉体验。
完整代码
以下是完整代码：
HTML:
<a href="#" class="item item1"> HELLO <span></span> <span></span> <span></span> <span></span> </a> <a href="#" class="item item2"> 提交 <span></span> <span></span> <span></span> <span></span> </a> <a href="#" class="item item3"> 确认 <span></span> <span></span> <span></span> <span></span> </a>
CSS代码:
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'fangsong'; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: rgb(0, 0, 0); } .item { position: relative; margin: 50px; width: 300px; height: 80px; text-align: center; line-height: 80px; text-transform: uppercase; text-decoration: none; font-size: 35px; letter-spacing: 5px; color: aqua; overflow: hidden; -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(6, 133, 133, 0.3)); } .item:hover { background-color: aqua; box-shadow: 0 0 5px aqua, 0 0 75px aqua, 0 0 155px aqua; color: black; } .item span:nth-of-type(1) { position: absolute; left: -100%; width: 100%; height: 3px; background-image: linear-gradient(to left, aqua, transparent); animation: btnanmaiton 1s linear infinite; } @keyframes btnanmaiton { 0% { left: -100%; } 50%, 100% { left: 100%; } } .item span:nth-of-type(2) { position: absolute; top: -100%; right: 0; width: 3px; height: 100%; background-image: linear-gradient(to top, aqua, transparent); animation: two 1s linear infinite; animation-delay: 0.25s; } @keyframes two { 0% { top: -100%; } 50%, 100% { top: 100%; } } .item span:nth-of-type(3) { position: absolute; right: -100%; bottom: 0; width: 100%; height: 3px; background-image: linear-gradient(to right, aqua, transparent); animation: three 1s linear infinite; animation-delay: 0.5s; } @keyframes three { 0% { right: -100%; } 50%, 100% { right: 100%; } } .item span:nth-of-type(4) { position: absolute; bottom: -100%; left: 0; width: 3px; height: 100%; background-image: linear-gradient(to bottom, aqua, transparent); animation: zuo 1s linear infinite; animation-delay: 0.75s; } @keyframes zuo { 0% { bottom: -100%; } 50%, 100% { bottom: 100%; } } .item1 { filter: hue-rotate(100deg); } .item3 { filter: hue-rotate(250deg); }
🌟 关键技术点如下：
- 鼠标悬停效果:
.item:hover选择器为按钮提供了鼠标悬停时的动态效果，包括背景颜色变化、多层阴影效果和文本颜色变化。
- 动画效果:
- 四个
span元素通过绝对定位放置在按钮的四周，并通过@keyframes定义了不同的线性渐变背景和动画效果。这些动画在按钮的不同边上模拟光线扫过的效果。
- 动画延迟:
- 每个动画都设置了不同的
animation-delay，以确保光线效果以一定的顺序和间隔出现，增强视觉效果。
- 滤镜效果:
.item1和.item3类为特定的按钮提供了filter: hue-rotate()效果，这将改变按钮的颜色色调，增加样式的多样性。
