使用H5和CSS制作非常炫酷的旋转标题栏。
原理分析
1.使用ul(无序列表)
2.圆形边框样式
3.透明度的设置
4.边框阴影的添加
5.li去掉前面的圆点
效果演示
初始样式
旋转动画
旋转完毕
代码演示
@1 CSS样式
<style>* {margin: 0;padding: 0;}body {background: url("images/bg_title.jpg") repeat-x, url("images/bg.jpg");}#all {width: 895px;height: 45px;/*margin:上下 左右*/margin: 50px auto;border-radius: 10px;/*html + css3 渐变画图 */background-image: -webkit-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);box-shadow: 1px 1px 33px #fff;/*设计阴影的*/}#all ul li {width: 127px;height: 45px;list-style: none;/*去掉圆点*/float: left;/*水平显示*/color: white;/* #fff */font-size: 18px;font-family: "微软雅黑";text-align: center;line-height: 45px;/* 行高跟 高度一致时，竖直居中*/border-right: 1px solid #000;/*右边框*/}#all ul li a {color: white;/* #fff */font-size: 18px;font-family: "微软雅黑";text-decoration: none;}#all ul li:hover {background: rgba(10, 5, 5, 0.45);}#all ul li.first:hover {border-radius: 10px 0px 0px 10px;/*左上 左下 圆弧显示 */}#all ul li.last:hover {border-radius: 0px 10px 10px 0px;/*右上 右下 圆弧显示 */}#all ul li ul li {border: none;border-top: 1px solid #989898;background: rgba(10, 5, 5, 0.45);/*颜色透明度 */border-radius: 10px;}#all ul li ul {display: none;/*不显示*/}#all ul li ul li:hover {background: rgba(10, 5, 5, 0.8);/*颜色透明度 */border-radius: 10px;}#all ul li:hover ul {display: block;-webkit-animation: roll 1s ease;/*roll 旋转名称，1s旋转效果 */}@-webkit-keyframes roll/*roll旋转名称与上面一致*/{0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}</style>
@2 Body内容
<body><div id="all"><ul><li class="first"><a href="#">首页<a><ul><li><a href="#">百度</a></li><li><a href="#">新浪</a></li></ul></li><li><a href="#">搜狐<a></li><li><a href="#">谷歌<a></li><li><a href="#">火狐<a></li><li><a href="#">360<a></li><li><a href="#">IE<a></li><li class="last" style="border:none;"><a href="#">关于<a></li></ul></div></body>
