1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>实现常用效果</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 .box { 15 width: 377px; 16 height: 280px; 17 margin: 50px auto; 18 position: relative; 19 overflow: hidden; 20 /* transition: 1.5s linear; */ 21 /* linear 表示匀速 */ 22 } 23 24 .bgPic { 25 width: 100%; 26 height: 100%; 27 transition: 1.5s linear; 28 } 29 30 .bgcolor { 31 width: 377px; 32 height: 280px; 33 background-color: black; 34 opacity: 0; 35 position: absolute; 36 top: 0; 37 transition: 1.5s linear; 38 } 39 /* .bgcolor:hover { 40 opacity: .7; 41 } */ 42 43 .box:hover .bgcolor { 44 opacity: .7; 45 } 46 47 .box h3 { 48 position: absolute; 49 width: 100%; 50 text-align: center; 51 font-size: 28px; 52 color: #2ebcff; 53 top: -40px; 54 transition: 1.5s linear; 55 } 56 57 .box:hover h3 { 58 top: 30px; 59 } 60 /* .box image:nth-of-type(3) { 61 position: absolute; 62 top: 0; 63 } */ 64 65 .box img:nth-of-type(3) { 66 position: absolute; 67 top: 100; 68 left: -90; 69 transition: 1.5s linear; 70 } 71 72 .box:hover img:nth-of-type(3) { 73 left: 150px; 74 } 75 76 .box img:nth-of-type(2) { 77 position: absolute; 78 top: 121px; 79 width: 20px; 80 height: 20px; 81 right: -90px; 82 transition: 1.5s linear; 83 z-index: 3; 84 } 85 86 .box:hover img:nth-of-type(2) { 87 right: 185px; 88 } 89 90 .box:hover img:nth-of-type(1) { 91 transform: scale(1.2) 92 } 93 </style> 94 </head> 95 96 <body> 97 <div class="box"> 98 <img class="bgPic" src="images/cm.png" /> 99 100 101 <p class="bgcolor"></p> 102 <h3>商业咨询策划</h3> 103 104 105 <img src="images/sae@1.png" /> 106 <img src="images/c@1.png" /> 107 108 </div> 109 </body> 110 111 </html>
