HTML菜单栏CSS优化详解

创建HTML项目

在HBuilder中创建HTML项目

网页进度条

.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; /*拉伸宽度持续2s*/
		}
		.transitionBox:hover{
			width:300px;
		}

菜单优化

ul{
			list-style: none;/*消除li前面的点*/
		}
		li{
			float: left;
			margin-right: 8px;
			background-color:blue;
			padding: 5px 10px 5px 10px;
			/*
			浏览器扩充动画,谷歌专用
			transform变相
			skewX x方向倾斜角度
			*/
			-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>

效果展示