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> 學習要點
- 運用所學過的知識完成一個簡單的小練習，了解對變形動畫的應用。