微信扫一扫打赏支持

html5--6-51 阶段练习3-旋转导航

html5--6-51 阶段练习3-旋转导航

 

 1 @charset="UTF-8";
 2 ul{
 3     list-style: none;
 4     font-size:24px;
 5     font-weight: bold;
 6 }
 7 
 8 a{
 9     text-decoration: none;
10 }
11 
12 li{
13     background: linear-gradient(to left,orange, red);
14     width: 150px;
15     margin:5px;
16     padding:10px 10px; 
17     border-radius: 5px;
18 }
19 
20 #ul1 li{
21     float: left;
22 }
23 
24 li:hover{
25         background:linear-gradient(to right,orange, red);
26         transform: rotate(15deg);
27         transform-origin: left top;
28 }
29 
30 hr{
31     clear: both;
32     margin-top: 50px;
33     /*width: 3px;*/
34     border: 3px dotted green;
35 }
View Code
 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>旋转导航</title>
 6     <link rel="stylesheet" type="text/css" href="but.css">
 7 </head>
 8 <body>
 9     <ul id="ul1">
10         <li><a href="#">HTML5</a></li>
11         <li><a href="#">CSS3</a></li>
12         <li><a href="#">JavaScript</a></li>
13         <li><a href="#">jQuery</a></li>
14     </ul>
15 <br><br>
16 <hr>
17     <ul id="ul2">
18         <li><a href="#">HTML5</a></li>
19         <li><a href="#">CSS3</a></li>
20         <li><a href="#">JavaScript</a></li>
21         <li><a href="#">jQuery</a></li>
22     </ul>
23 </body>
24 </html>
View Code

 

 

学习要点

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

 

posted @ 2017-12-10 17:28  范仁义  阅读(299)  评论(0)  编辑  收藏  举报