创建HTML项目
在HBuilder中创建HTML项目
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0d177f075c5e5762b2bb58513ce0dfc5.png#pic_center)
网页进度条
.moveBox{
width: 100px;
height: 5px;
background-color: blue;
animation: mymove 2s infinite;
}
@keyframes mymove{
from{width: 0px;}
to{width: 300px;}
}
拉伸效果
.transitionBox{
width: 100px;
height: 100px;
background-color: aqua;
transition:width 2s;
}
.transitionBox:hover{
width:300px;
}
菜单优化
ul{
list-style: none;
}
li{
float: left;
margin-right: 8px;
background-color:blue;
padding: 5px 10px 5px 10px;
-webkit-transform: skewX(30deg);
}
li:hover{
background-color: aqua;
}
a{
text-decoration:none;
color: white;
-webkit-transform: skewX(-30deg);
display: block;
}
HTML代码
<div>移动效果</div>
<div class="moveBox"></div>
<div>拉伸效果</div>
<div class="transitionBox"></div>
<div>
<ul>
<li><a href="www.baidu.com" target="_blank">百度</a></li>
<li><a href="www.taobao.com"target="_blank">淘宝</a></li>
<li><a href="www.jd.com"target="_blank">京东</a></li>
<li><a href="www.csdn.net"target="_blank">CSDN</a></li>
</ul>
</div>
效果展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0b5890bacad8fcb7890be66667fe836b.png#pic_center)