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>