首页html+css生成一个按钮，鼠标未点击按钮时，按钮边框颜色固定，当鼠标悬停到按钮上时，边框出现一条围绕边框移动的光线

html+css生成一个按钮，鼠标未点击按钮时，按钮边框颜色固定，当鼠标悬停到按钮上时，边框出现一条围绕边框移动的光线

时间: 2024-03-17 12:42:30 浏览: 16

您可以参考以下代码实现： ```html <!DOCTYPE html> <html> <head> <title>Button Hover Effect</title> <style> button { border: 2px solid #000; padding: 10px 20px; background-color: #fff; font-size: 16px; cursor: pointer; position: relative; } button::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 2px solid transparent; transition: all 0.3s ease-in-out; z-index: -1; } button:hover::before { border-color: #00f; box-shadow: 0 0 10px #00f; animation: pulsate 1s linear infinite; } @keyframes pulsate { 0% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } </style> </head> <body> <button>Hover Me</button> </body> </html> ``` 这里利用了CSS伪元素 `::before` 来实现按钮的边框和光线效果，并利用 `:hover` 伪类来实现鼠标悬停时的效果。同时，通过 `@keyframes` 定义了一个动画效果来让光线围绕边框移动。