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

学习要点

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

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

 @charset "utf-8";

 /* CSS Document */

 img{

     width: 50px;

     height: 150px;

     border: 3px groove orange;

 }

 div{

     width: 800px;

     height: 600px;

     background: rgba(0,0,0,0.2) url(res/hl.jpg) no-repeat;

     background-size: cover;

     padding: 20px;

     margin-left: auto;

     margin-right: auto;

 }

 ul{

     list-style-type: none;

     margin-top: 150px;

 }

 li{

     float: left;

     transform-origin: left top;

     transform: rotate(10deg);

     transition: all 1s ease;

 }

 li:nth-child(2){

     transform: rotate(15deg);

 }

 li:nth-child(3n){

     transform: rotate(-25deg);

 }

 li:nth-child(4n){

     transform: rotate(30deg);

 }

 li:nth-child(5n){

     transform: rotate(-20deg);

 }

 li:hover{

     position: relative;

     z-index:;

     transform: rotate(0deg) scale(3);

 }

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <link rel="stylesheet" type="text/css" href="style.css">

 </head>

     <div>

         <ul>

             <li><a href=""><img src="res/gh1.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh2.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh3.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh4.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh5.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh1.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh2.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh3.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh4.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh5.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh1.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh2.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh3.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh4.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh5.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh1.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh2.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh3.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh4.jpg" alt=""></a></li>

             <li><a href=""><img src="res/gh5.jpg" alt=""></a></li>

         </ul>

     </div>

 <body>

 </body>

 </html>