Kann mir jemand sagen, wie man so einen Hover in CSS macht?
Dies ist ein Beispiel für ein Windows 10-Setup. Aber ich möchte es in CSS replizieren.
您可以使用多个渐变背景图像来获得悬停时的效果。
这是一个例子。显然，请尝试各种设置，直到获得您想要的外观为止。
<style> body { background: black; } div { width: 150px; height: 50px; color: red; } div:hover { background-image: linear-gradient(to right, white, transparent), linear-gradient(white, transparent), linear-gradient(to right, rgba(255, 255, 255, 0.3), 20%, transparent); background-size: 100% 1px, 1px 100%, 100% 100%; background-position: top left, top left, 1px 1px; background-repeat: no-repeat; } </style> <body> <div>Hover here</div> </body>
您可以使用多个渐变背景图像来获得悬停时的效果。
这是一个例子。显然，请尝试各种设置，直到获得您想要的外观为止。
<style> body { background: black; } div { width: 150px; height: 50px; color: red; } div:hover { background-image: linear-gradient(to right, white, transparent), linear-gradient(white, transparent), linear-gradient(to right, rgba(255, 255, 255, 0.3), 20%, transparent); background-size: 100% 1px, 1px 100%, 100% 100%; background-position: top left, top left, 1px 1px; background-repeat: no-repeat; } </style> <body> <div>Hover here</div> </body>