zoukankan html css js c++ java

边框折角效果

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .image-layer {
 8              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- 80px;
28             border-bottom- 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 {
             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- 80px;
            border-bottom- 80px
        }
    </style>
</head>
<body>


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

</body>
</html>

查看全文

相关阅读:
Alpha冲刺Day5
Alpha冲刺Day4
Alpha冲刺Day3
团队作业——随堂小测
 Alpha冲刺Day2
Alpha冲刺Day1
团队项目需求分析
 结对项目第二次作业
 Linux中exec命令相关
 .lib和.dll文件

原文地址：https://www.cnblogs.com/mx2036/p/7492279.html