Css实现鼠标移动图片上光亮效果
<html>
<head>
<title>Css实现鼠标移动图片上光亮效果</title>
</head>
<style>
.demo {
position: relative;
overflow: hidden;
background: #000;
width: 400px;
height: 230px;
}
.demo:before {
content: "";
cursor: pointer;
position: absolute;
left: -120%;
top: 0;
width: 100%;
height: 100%;
mix-blend-mode: overlay;
background-image: -moz-linear-gradient(
0deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0)
);
background-image: -webkit-linear-gradient(
0deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0)
);
transform: skewx(-25deg);
z-index: 1;
}
.demo:hover:before {
left: 120%;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
</style>
<body>
<div class="demo">
<img
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
/>
</div>
</body>
</html>
浙公网安备 33010602011771号