CSS3鼠标滑过渐变颜色旋转图标特效
来源:互联网 发布:java开发培训费用 编辑:程序博客网 时间:2024/05/08 16:45
<title>CSS3鼠标滑过渐变颜色旋转图标特效</title>
<style type="text/css">*{margin: 0;padding: 0;list-style: none;}
#order_nav { position: relative; background: #fff; position: relative; }
#order_nav .list { width: 936px; margin: 0 auto; }
#order_nav .list li { width: 116px; height: 116px; float: left; border-radius: 50%; position: relative; margin: 0 20px 80px 20px; position: relative; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; transition: .4s all; }
#order_nav .list li a { display: block; width: 100%; height: 100%; }
#order_nav .list li .cycle_mark { position: absolute; left: 0; top: 0; z-index: 2; }
#order_nav .list li .ico { width: 102px; height: 102px; position: absolute; left: 7px; top: 7px; background: #424242 url(http://img.hoop8.com/attachments/1602/3101919920043.png); border-radius: 50%; z-index: 1; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; transition: .4s all; }
#order_nav .list li ._1 { background-position: 0px 0px; }
#order_nav .list li ._2 { background-position: -102px 0px; }
#order_nav .list li ._3 { background-position: -204px 0px; }
#order_nav .list li ._4 { background-position: -306px 0px; }
#order_nav .list li ._5 { background-position: -408px 0px; }
#order_nav .list li ._6 { background-position: -510px 0px; }
#order_nav .list li p { width: 100%; position: absolute; left: 0; top: 126px; text-align: center; }
#order_nav .list li p span { font-size: 16px; color: #414141; display: block; font-weight: bold; }
#order_nav .list li p strong { font-size: 12px; color: #f00; display: block; }
#order_nav .list li.on { background: rgba(0,0,0,.5); }
#order_nav .list li.on .ico { background-color: #0ff; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>
<div id="order_nav">
<ul class="list not_ie">
<li>
<div class="ico _1"><a href="#"></a></div>
<p><span>网站建设</span></p>
</li>
<li>
<div class="ico _2"><a href="#"></a></div>
<p><span>网站设计</span></p>
</li>
<li>
<div class="ico _3"><a href="#"></a></div>
<p><span>网站策划</span></p>
</li>
<li>
<div class="ico _4"><a href="#"></a></div>
<p><span>SEO优化</span></p>
</li>
<li>
<div class="ico _5"><a href="#"></a></div>
<p><span>WAP/APP</span></p>
</li>
<li>
<div class="ico _6"><a href="#"></a></div>
<p><span>网站营销</span></p>
</li>
</ul>
</div>
<script>
var orderNav = document.getElementById("order_nav");
var lis = orderNav.getElementsByTagName("li");
for(var i =0;i<lis.length;i++){
lis[i].onmouseover = function(){
this.className = "on";
};
lis[i].onmouseout = function(){
this.className = "";
}
}
</script>
0 0
- CSS3鼠标滑过渐变颜色旋转图标特效
- 20种炫酷CSS3按钮鼠标滑过特效
- CSS3鼠标滑过彩色按钮动画特效
- css3鼠标滑过图片文字动画特效
- 纯CSS3鼠标滑过按钮动画过滤特效
- css3 鼠标hover事件背景颜色渐变
- css3 鼠标滑过图片时文字旋转动画
- JQ鼠标滑过特效
- jquery鼠标滑过特效
- Html鼠标 滑过特效
- 9种CSS3 blend模式制作的鼠标滑过图片标题特效
- 文字 11种HTML5和CSS3炫酷文字样式和鼠标滑过特效
- 鼠标滑过旋转360
- 鼠标悬停旋转的图标按钮特效(纯CSS)
- CSS3----画圆,渐变,旋转
- 颜色渐变特效
- 文字颜色渐变特效
- css3 颜色 背景 渐变
- Oracle expdp/impdp 用法例子 详解 举例 例子 他的这篇文章没有办法写出来 要这么改
- cpu信息
- Xcode6中如何使用自定义的类模板
- 企业在什么情况需要部署CRM系统?
- 你百度不到的android坑 imageview.setimageDrawable和setbackgroundDrawable
- CSS3鼠标滑过渐变颜色旋转图标特效
- [Android] ListView 滚回顶部
- javascript原生代码实现ajax请求
- 缓存
- readonly 与 disabled的区别(disabled提交后获取不到该值的解决方法)
- 经历 成长——致逝去的时光
- Android中View的滑动冲突——Android开发艺术探索笔记
- swift 学习笔记2 -- 单例
- Cloud Test 单页面即时监测功能上线!