一些简单css3效果的整理

代码：

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>

View Code

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 }

View Code

这里记录一下鄙人对于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里面设置。