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>
