代码：
html:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 <div class="con con1"> 10 <img src="1.jpg" class="img1"> 11 <h2>第一文字</h2> 12 <p>下方文字闪出来</p> 13 </div> 14 <div class="con con2"> 15 <img src="2.jpg"> 16 <p class="p p1">第一先锋</p> 17 <p class="p p2">第二二先锋</p> 18 <p class="p p3">第三三三先锋</p> 19 </div> 20 <div class="con con3"> 21 <img src="3.jpg"> 22 <p>好好学习，天天向上好好学习，天天向上好 23 好学习，天天向上好好学习，天天向上好好 24 学习，天天向上好好学习，天天向上好好学 25 习，天天向上 26 </p> 27 </div> 28 <div class="con con4"> 29 <img src="4.jpg"> 30 <div class="con44"> 31 <p>晨落梦公子</p> 32 </div> 33 </div> 34 <div class="con con5"> 35 <img src="5.jpg"> 36 <div class="box"></div> 37 </div> 38 <div class="con con6"> 39 <img src="6.jpg"> 40 <h2>旋转消失</h2> 41 <p>我只是内容不要看我</p> 42 </div> 43 <div class="con con7"> 44 <img src="7.jpg"> 45 <div class="box"></div> 46 </div> 47 <div class="con con8"> 48 <img src="8.jpg"> 49 <div class="top"></div> 50 <div class="left"></div> 51 <div class="right"></div> 52 <div class="bottom"></div> 53 </div> 54 <div class="con con9"> 55 <img src="9.jpg"> 56 </div> 57 </body> 58 </html>
css:
1 * {
2 list-style: none;
3 padding: 0;
4 margin: 0;
5 }
6
7 /*+++++++++++++++++++++con1++++++++++++++++++++++++++*/
8 .con {
9 position: relative;
10 float: left;
11 width: 350px;
12 height: 300px;
13 overflow: hidden;
14 }
15
16 .con img {
17 width: 100%;
18 height: 100%;
19 position: absolute;
20 }
21
22 .con1 .img1 {
23 width: 120%;
24 margin-left: -30px;
25 left: 0;
26 opacity: 1;
27 -webkit-transition: all 1s ease;
28 }
29
30 .con1:hover .img1 {
31 left: 30px;
32 opacity: 0.6;
33 }
34
35 .con1 h2 {
36 color: #fff;
37 position: absolute;
38 top: 180px;
39 left: 5px;
40 -webkit-transition: all 1s ease;
41 }
42
43 .con1:hover h2 {
44 top: 220px;
45 }
46
47 .con1 p {
48 color: #fff;
49 font-size: 12px;
50 position: absolute;
51 top: 300px;
52 left: 5px;
53 -webkit-transition: all 1s ease;
54 }
55
56 .con1:hover p {
57 top: 260px;
58 }
59
60 /*++++++++++++++++++++con2+++++++++++++++++++++++*/
61 .con2 p {
62 font-size: 12px;
63 color: #000;
64 position: absolute;
65 background: #ffffff;
66 padding: 5px;
67 }
68
69 .con2 .p1 {
70 top: 150px;
71 left: -80px;
72 -webkit-transition: all 1s ease-in-out;
73 }
74
75 .con2 .p2 {
76 top: 180px;
77 left: -100px;
78 -webkit-transition: all 1s ease-in-out;
79 -webkit-transition-delay: 0.2s;
80 }
81
82 .con2 .p3 {
83 top: 210px;
84 left: -120px;
85 -webkit-transition: all 1s ease-in-out;
86 -webkit-transition-delay: 0.4s;
87 }
88
89 .con2:hover .p1,
90 .con2:hover .p2,
91 .con2:hover .p3 {
92 left: 20px;
93 }
94
95 /*+++++++++++++++++++con3++++++++++++++++++++++++*/
96 .con3 p {
97 background: #fff;
98 color: #000000;
99 position: absolute;
100 text-indent: 2em;
101 font-size: 12px;
102 top: 300px;
103 -webkit-transition: all 1s ease-in-out;
104 }
105
106 .con3:hover p {
107 top: 255px;
108 }
109
110 /*+++++++++++++++++con4++++++++++++++++++++++++++++*/
111 .con4 .con44 {
112 width: 200%;
113 height: 100%;
114 background: #fff;
115 font-size: 12px;
116 color: #000000;
117 position: absolute;
118 top: 300px;
119 -webkit-transition: all 1s ease-in-out;
120 }
121
122 .con4 .con44 p {
123 margin-left: 300px;
124 line-height: 150px;
125 -webkit-transition: all 1s ease-in-out;
126 }
127
128 .con4:hover .con44 {
129 -webkit-transform: rotate(-20deg);
130 -webkit-transform-origin: 0 300px;
131 }
132
133 .con4:hover p {
134 -webkit-transform: rotate(20deg);
135 }
136
137 /*+++++++++++++++con5+++++++++++++++++++++++*/
138 .con5 img {
139 width: 120%;
140 left: -40px;
141 -webkit-transition: all 1s ease-in-out;
142 }
143
144 .con5:hover img {
145 left: 0;
146 }
147
148 .con5 .box {
149 border: 2px solid #000000;
150 width: 250px;
151 height: 250px;
152 position: absolute;
153 top: 25px;
154 left: 50px;
155 -webkit-transform: rotate(-90deg);
156 -webkit-transform-origin: -100px -100px;
157 -webkit-transition: all 1s ease-in-out;
158 }
159
160 .con5:hover .box {
161 -webkit-transform: rotate(0deg);
162 -webkit-transform-origin: 0 0;
163 }
164
165 /*++++++++++++++++++con6++++++++++++++*/
166 .con6 h2 {
167 position: absolute;
168 color: #000;
169 top: 100px;
170 left: 10px;
171 -webkit-transition: all 1s ease-in-out;
172 }
173
174 .con6 p {
175 font-size: 24px;
176 color: #000;
177 position: absolute;
178 top: 150px;
179 left: 10px;
180 -webkit-transition: all 1s ease-in-out;
181 }
182
183 .con6:hover h2, .con6:hover p {
184 -webkit-transform: skewX(90deg);
185 }
186
187 /*++++++++++++++++con7++++++++++++++++++++++++++*/
188 .con7 .box {
189 position: absolute;
190 border: 2px solid #fff;
191 width: 350px;
192 height: 300px;
193 -webkit-transition: all 1s ease-in-out ;
194 }
195
196 .con7 img {
197 width: 450px;
198 height: 400px;
199 left: -50px;
200 top: -50px;
201 -webkit-transition: all 1s ease-in-out;
202 }
203
204 .con7:hover img, .con7:hover .box {
205 opacity: 0.6;
206 -webkit-transform: scale(0.8);
207 }
208
209 /*+++++++++++++con8++++++++++++++++++++++++++*/
210 .con8 .top {
211 position: absolute;
212 top: 35px;
213 left: 25px;
214 width: 300px;
215 height: 1px;
216 background: black;
217 -webkit-transform: scale(0);
218 -webkit-transition: all 1s ease-in-out;
219 }
220
221 .con8 .bottom {
222 position: absolute;
223 top: 265px;
224 left: 25px;
225 width: 300px;
226 height: 1px;
227 background: black;
228 -webkit-transform: scale(0);
229 -webkit-transition: all 1s ease-in-out;
230 }
231
232 .con8 .left {
233 position: absolute;
234 top: 25px;
235 left: 35px;
236 width: 1px;
237 height: 250px;
238 background: black;
239 -webkit-transform: scale(0);
240 -webkit-transition: all 1s ease-in-out;
241 }
242
243 .con8 .right {
244 position: absolute;
245 top: 25px;
246 left: 315px;
247 width: 1px;
248 background: black;
249 height: 250px;
250 -webkit-transform: scale(0);
251 -webkit-transition: all 1s ease-in-out;
252 }
253
254 .con8:hover .right,
255 .con8:hover .top,
256 .con8:hover .bottom,
257 .con8:hover .left {
258 -webkit-transform: scale(1);
259 }
260
261 /*++++++++++++++con9++++++++++++++++++++++*/
262 .con9 {
263 -webkit-transition: all 1s ease-in-out;
264 }
265
266 .con9:hover {
267 opacity: 0.5;
268 }
这里记录一下鄙人对于animation和transition不同之处的理解（待补充。）
animation
可以实现永远循环的动画
transition
可以实现hover鼠标移除移入的动画
一些注意点：（带补充。）
1，transform的行使对象应该是块级元素
2，写hover动画的时候，默然对象状态要有和hover状态中与之对应的属性，例子：如果hover里面有left:30px,对应的原始状态里面也应该有left:0;
3，初始状态中有rotate(90deg),再在hover里面写rotate(0deg)，hover后目标元素应该是保持其应有的状态（这里指角度），而不是其应有状态在旋转-90度，移动，缩放等同理
4，动画有时候会设置旋转点，而这个设置应该在本身样式里面设置，而不是在hover里面设置。
时间： 2024-07-30 02:13:58