84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
有人可以告诉我如何在 css 中进行这样的悬停吗?
这是 Windows 10 设置的示例。但我想在 css 中复制它。
您可以使用多个渐变背景图像来获得悬停时的效果。
这是一个例子。显然,请尝试各种设置,直到获得您想要的外观为止。
<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>
您可以使用多个渐变背景图像来获得悬停时的效果。
这是一个例子。显然,请尝试各种设置,直到获得您想要的外观为止。