资料来源：慕课网（点击这里）
课程结束后有两个效果：
效果一：CSS制作照片墙（点击这里）
效果二：旋转出现文字效果（点击这里）
实现代码：
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="utf-8" />
5 <title>CSS实现照片墙</title>
6 <style>
7 body{background-color:#eee;}
8 h1{text-align:center;}
9 .container{
10 /*
11 background-color:#3F3;
12 */
13 width:950px;
14 height:450px;
15 margin:60px auto;
16 position:relative;
17 }
18 img{padding:10px 10px 15px;background-color:#fff;
19 border:1px solid #ddd;
20 top:50px;left:200px;
21
22 /*
23 考虑到浏览器的兼容性这里加上了-webkit-和-moz-，
24 分别是用于Chrome和Safari浏览器的前缀
25 及-moz-是Firefox的前缀
26 */
27 -webkit-transform:rotate(-30deg);
28 -moz-transform:rotate(-30deg);
29 rotate(-30deg);
30 /*设置动画时间长度*/
31 -webkit-transition:2s;
32 -moz-transition:2s;
33 transition:2s;
34
35 /*制作放大效果*/
36
37
38 }
39 img:hover{
40 -webkit-transform:rotate(0deg);
41 -moz-transform:rotate(0deg);
42 rotate(0deg);
43
44 -webkit-transform:scale(0.5);
45 -moz-transform:scale(0.5);
46 transform:scale(0.5);
47
48 box-shadow:-10px 10px 15px #ccc;
49 }
50 </style>
51
52 </head>
53
54 <body>
55 <h1>照片墙制作</h1>
56 <div class="container">
57 <img src="images/5.jpg">
58 </div>
59 </body>
60 </html>
实现代码二：
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
5 <style>
6 .mainDiv{
7 width:100px;
8 height:100px;
9 margin:100px auto;
10 text-align: center;
11 line-height: 100px;
12 font-weight: bold;
13 color:#ddd;
14 background:#ddd;
15 border:1px solid #ddd;
16 -webkit-transform:rotate(0deg) scale(1);
17 -moz-transform:rotate(0deg) scale(1);
18 transform:rotate(0deg) scale(1);
19 -webkit-transition:2s;
20 -moz-transition:2s;
21 transition:2s;
22
23 }
24 .mainDiv:hover{
25 color:#000;
26 background:#f00;
27 border:1px solid #ddd;
28 -webkit-transform:rotate(720deg) scale(2);
29 -moz-transform:rotate(720deg) scale(2);
30 transform:rotate(720deg) scale(2);
31 }
32 </style>
33 <title>css3特效</title>
34 </head>
35 <body>
36 <div class="mainDiv">您好</div>
37 </body>
38 </html>
时间： 2024-08-06 16:05:38