旋转特效-鼠标经过

原创 2016年08月30日 13:37:22

旋转特效:


<style type="text/css">
*{margin:0px;padding:0px;}
body{background:url("images/bodyBg.jpg");}
#nav{width:980px;height:350px;margin:100px auto;}
#nav ul li{list-style:none;background:rgba(0,0,0,.5);height:105px;width:180px;float:left;margin:30px 5px;position:relative;}
#nav ul li:before{
content:"";height:105px;width:180px;background:rgba(0,0,0,.5);position:absolute;top:0px;left:0px;
transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
}
#nav ul li:after{
content:"";height:105px;width:180px;background:rgba(0,0,0,.5);position:absolute;top:0px;left:0px;z-index:1;
transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
-moz-transform:rotate(-60deg);
}
#nav ul li.mar{margin-left:100px;}
#nav ul li img{
top:0px;left:0px;right:0px;bottom:0px;margin:auto;z-index:2;position:absolute;
transition:1s;
-webkit-transition:1s;
-moz-transition:1s;
}
#nav ul li img:hover{
-webkit-transform:rotate(360deg) scale(1.5); 
-moz-transform:rotate(360deg) scale(1.5);
-ms-transform:rotate(360deg) scale(1.5);
-o-transform:rotate(360deg) scale(1.5);
}
</style>


<div id="nav">
<ul>
<li><img src="images/1.png"/></li>
<li><img src="images/2.png"/></li>
<li><img src="images/3.png"/></li>
<li><img src="images/4.png"/></li>
<li><img src="images/5.png"/></li>
<li class="mar"><img src="images/1.png"/></li>
<li><img src="images/7.png"/></li>
<li><img src="images/8.png"/></li>
<li><img src="images/9.png"/></li>
<li><img src="images/10.png"/></li>
<li><img src="images/11.png"/></li>
<li><img src="images/12.png"/></li>
<li><img src="images/13.png"/></li>
<li><img src="images/14.png"/></li>
</ul>
</div>
版权声明:本文为博主原创文章,未经博主允许不得转载。

css3鼠标经过旋转效果

  • 2015年12月05日 09:39
  • 522KB
  • 下载

一种鼠标经过选项执行切换的特效

在最近帮人改网站时,遇到了这种问题。场景描述如下: 页面初始化时,左侧第一栏“长江学者”要处于选中状态【字体颜色改变,右侧显示该栏目的内容】; 鼠标到左侧其他选项时,选项文字颜色发生变化,右侧内容跟着...

30款css3实现的鼠标经过图片显示描述特效

今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述。为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现...
  • dhdhxgx
  • dhdhxgx
  • 2015年02月02日 21:49
  • 539

30款css3实现的鼠标经过图片显示描述特效

今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述。为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari ...

JQuery鼠标经过弹出气泡框的js特效效果

Animated Menu Hover 1 $(document).ready(function(){ $(".menu li").hover(function() { $(this)....
  • rzg813
  • rzg813
  • 2014年07月07日 18:51
  • 2103

CSS3鼠标滑过渐变颜色旋转图标特效

CSS3鼠标滑过渐变颜色旋转图标特效 *{margin: 0;padding: 0;list-style: none;} #order_nav {  position: relative; back...

jquery鼠标经过闪光出现标题特效

  • 2014年08月26日 10:07
  • 313KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:旋转特效-鼠标经过
举报原因:
原因补充:

(最多只允许输入30个字)