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 }
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>
学习要点
- 运用所学过的知识完成一个简单的小练习，理解对变形动画的应用。