鼠标移上去 卷角
思路 1 鼠标一上去 左上角出现一个 矩形 矩形先定好位置
2 处理一下看上去更像 加动画过渡
3 处理一下样式 把小矩形 背景色渐变 圆角 完美
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片卷边</title>
<style>
.img_box {
height: 200px;
width: 200px;
margin: auto;
position: relative;
border-radius: 15px;
margin-top: 200px;
}
img {
height: 200px;
width: 200px;
border-radius: 15px;
vertical-align: baseline;
}
.img_box:before {
content: "";
width: 0px;
height: 0px;
background: #fff;
position: absolute;
top: 0;
left: 0;
border-radius: 0 0 5px 0;
background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
transition: all 0.5s;
}
.img_box:hover:before {
content: "";
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div class="img_box">
<img src="img/headimg.png" />
</div>
</body>
</html>