CSS制作照片墙 - tianxia2s

时间：2024-02-23 14:36:36

CSS制作照片墙

资料来源：慕课网（点击这里）

课程结束后有两个效果：

效果一：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>

 

相关文章