<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div{ position: relative; width: 200px; height: 200px; overflow: hidden; border: 1px solid #cad4ff; background-color: #50abd8; border-radius: 8px; box-shadow: 0 8px 15px rgba(0,0,0,.4); cursor: pointer; } .div:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background: linear-gradient(90deg,transparent,#fff,transparent); transition: all .3s; } .div:hover:before { left: 100%; } </style> </head> <body> <div class="div"></div> </body> </html>