代码改变世界

边框折角效果

2017-09-07 22:35  笨笨03  阅读(147)  评论(0)  编辑  收藏  举报 
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .image-layer {
 8             width: 384px;
 9             height: 240px;
10             margin: 40px auto 0;
11             position: relative;
12             cursor: pointer;
13             overflow: hidden;
14         }
15 
16         .image-layer:before {
17             content: '';
18             position: absolute;
19             top: 0;
20             right: 0;
21             border: 0px solid;
22             border-color: rgba(0, 0, 0, 0.2) #fff;
23             -webkit-transition: border .5s ease;
24         }
25 
26         .image-layer:hover:before {
27             border-right-width: 80px;
28             border-bottom-width: 80px
29         }
30     </style>
31 </head>
32 <body>
33 
34 
35     <div class="image-layer" id="image-layer">
36         <img src="test.jpg" />
37     </div>
38 
39 </body>
40 </html>
View Code
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .image-layer {
            width: 384px;
            height: 240px;
            margin: 40px auto 0;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }

        .image-layer:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            border: 0px solid;
            border-color: rgba(0, 0, 0, 0.2) #fff;
            -webkit-transition: border .5s ease;
        }

        .image-layer:hover:before {
            border-right-width: 80px;
            border-bottom-width: 80px
        }
    </style>
</head>
<body>


    <div class="image-layer" id="image-layer">
        <img src="test.jpg" />
    </div>

</body>
</html>