建站技术分享网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrapper{
position: relative;
width: 240px;
cursor: pointer;
}
#flash{
position: absolute;
width: 100px;
height: 100%;
left: -145px;
top: 0;
background:-webkit-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.3)50%,rgba(255,255,255,0)100%);
transform: skewX(-30deg);
}
#wrapper:hover #flash{
left: 300px;
transition: all 0.5s ease-in-out;
}
</style>
</head>
<body>
<div id="wrapper" title="css魔法">
<div id="flash"></div>
<img src="img/magic.jpeg" width="100%">
</div>
</body>
</html>
分类： css
CSS魔法/闪光效果/径向渐变
文章作者：清风
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t......
