图片卷边

鼠标移上去卷角

思路 1 鼠标一上去左上角出现一个矩形矩形先定好位置

2 处理一下看上去更像加动画过渡

3 处理一下样式把小矩形背景色渐变圆角完美

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>图片卷边</title>
       <style>
           .img_box {
               height: 200px;
               200px;
               margin: auto;
               position: relative;
               border-radius: 15px;
               margin-top: 200px;
           }

           img {
               height: 200px;
               200px;
               border-radius: 15px;
               vertical-align: baseline;
           }

           .img_box:before {
               content: "";
               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: "";
               30px;
               height: 30px;
           }
       </style>
   </head>

   <body>
       <div class="img_box">
           <img src="img/headimg.png" />
       </div>
   </body>

</html>