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     /* 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

学习要点

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

相关阅读:
解决跨域问题
封装树形结构数据
使用脚手架搭建vue项目
Vue入门之HelloWorld
element-ui 格式化树形数组在table组件中展示（单元格合并）
js导出excel，时间格式问题
webpack代理设置
null和undefined的区别？
js Number和parseInt 的区别
js数据类型

原文地址：https://www.cnblogs.com/Renyi-Fan/p/8017474.html