12.方形相框遮罩---动图

HTML:

 1 <!DOCTYPE html>
 2 <head>
 3 <meta charset="utf-8"/>
 4 <title>demo06</title>
 5 <link type="text/css" href="E:\htmltest1\demo1\demo06.css" rel="stylesheet">
 6 </head>
 7 <body>
 8     <div class="tuying">
 9         <img src="D:\新增資料夾\biao.png"/>
10         <p class="heiying"></p>
11         <h3>轩轩你最</h3>
12         <p class="yuan">帅</p>
13     </div>
14 </body>

View Code

CSS:

 1 *{margin:0;padding:0;}
 2 
 3 .tuying{
 4     width:300px;
 5     height:300px;
 6     border:1px solid black;
 7     margin:100px auto;
 8     position:relative;
 9     overflow:hidden;
10 }
11 img{
12     width:300px;
13     height:300px;
14     display:block;
15 }
16 .heiying{
17     width:300px;
18     height:300px;
19     background:black;
20     opacity:0;
21     position:absolute;
22     top:0;
23     transition:2s;
24 }
25 .tuying:hover p:nth-of-type(1){opacity:0.5;}
26 
27 h3{
28     position:absolute;
29     top:-40px;
30     width:300px;
31     height:30px;
32     text-align:center;
33     transition:2s;
34     color:pink;
35 }
36 .tuying:hover h3{top:60px;}
37 
38 .yuan {
39     width:50px;
40     height:50px;
41     background:blue;
42     border-radius:50%;
43     position:absolute;
44     top:125px;
45     left:-60px;
46     opacity:0.7;
47     transition:2s;
48     font-size:30px;
49     text-align:center;
50     color:white;
51 }
52 .tuying:hover p:nth-of-type(2){left:125px;}