创建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"></a></li> </ul> </div>

效果展示