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>
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;}
效果：
