你好，我是 Silvana，一名前端开发。
这里记录我写过的代码、做过的项目，以及一些真实想法。
这是一个按钮悬停的流光效果，鼠标悬浮到按钮上会发光，还有细线条一层层展开。
1. HTML结构
<div class="container"><a href="#" class="btns">Button</a><a href="#" class="btns">Button</a>
</div>
2. js交互
document.addEventListener("DOMContentLoaded", function() {let btns = document.querySelectorAll(".btns");btns.forEach(function(btn) {for (let i =0; i< 40; i++) {let span = document.createElement("span");span.style.top = `${i * 2}px`;btn.appendChild(span);let randomDelay = Math.random() * 0.75;span.style.transitionDelay = `${randomDelay}s`;}})
})
3. CSS样式
主要是 hover 时的发光滤镜和线条展开的节奏，动一点点参数感觉就不一样。
* {margin: 0;padding: 0;box-sizing: border-box;
}
body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #363a3b;
}
.container {position: relative;display: flex;flex-direction: column;gap: 60px;
}
.btns {position: relative;width: 240px;height: 80px;display: flex;justify-content: center;align-items: center;cursor: pointer;background: rgba(0,0,0,0.1);font-size: 2em;text-transform: uppercase;text-decoration: none;color: #7ef0ff;letter-spacing: 0.1em;transition: 0.5s;transition-delay: 0.5s;
}
.btns:hover {filter: drop-shadow(0 0 10px #7ef0ff) drop-shadow(0 0 30px #7ef0ff);color: #363a3b;
}
.btns span {position: absolute;left: 0;width: 100%;height: 2px;background: #7ef0ff;z-index: -1;transform: scaleX(0);transform-origin: right;transition: transform 0.25s ease-in-out;
}
.btns:hover span {transform: scaleX(1);transform-origin: left;
}
写着写着就到了结尾，祝您今晚有个好梦（代码少报错一点）。
本文由mdnice多平台发布