首页 > 代码库 > 图片卷边

图片卷边

技术分享

鼠标移上去   卷角   

思路  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="http://www.mamicode.com/img/headimg.png" />
        </div>
    </body>

</html>

图片卷边