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

最新推荐文章于 2023-02-22 15:10:36 发布

weixin_33912453

最新推荐文章于 2023-02-22 15:10:36 发布

阅读量98

点赞数

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

学习要点

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

weixin_33912453

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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 ...
复制链接

扫一扫