html5--6-53 阶段练习4-画廊

学习要点

• 运用所学过的知识完成一个简单的小练习，理解对过渡动画的应用。

1 @charset "utf-8"; 2 /* CSS Document */ 3 img{ 4     width: 50px; 5     height: 150px; 6     border: 3px groove orange; 7 } 8  9 div{10     width: 800px;11     height: 600px;12     background: rgba(0,0,0,0.2) url(res/hl.jpg) no-repeat;13     background-size: cover;14     padding: 20px;15     16     margin-left: auto;17     margin-right: auto;18 }19 20 ul{21     list-style-type: none;22     margin-top: 150px;23 }24 25 li{26     float: left;27     transform-origin: left top;28     transform: rotate(10deg);29     transition: all 1s ease;30 }31 32 li:nth-child(2){33     transform: rotate(15deg);34 }35 36 li:nth-child(3n){37     transform: rotate(-25deg);38 }39 40 li:nth-child(4n){41     transform: rotate(30deg);42 }43 44 li:nth-child(5n){45     transform: rotate(-20deg);46 }47 48 li:hover{49     position: relative;50     z-index: 1000;51     transform: rotate(0deg) scale(3);52 }

1  2  3  4 
      5  6 
      7  8     
     
       9         
      
       10             
       
11             
       
12             
       
13             
       
14             
       
15             16             
       
17             
       
18             
       
19             
       
20             
       
21             22             
       
23             
       
24             
       
25             
       
26             
       
27             28             
       
29             
       
30             
       
31             
       
32             
       
33         
      
34     
     
35 36 37