【第22期】观点:IT 行业加班,到底有没有价值?

旋转特效-鼠标经过

原创 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>
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

鼠标经过图片变亮离开变暗的js特效代码

鼠标经过图片变亮离开变暗的js特效代码,分别可css实现和jquery实现,兼容FF(鼠标特效代码,js图片变亮,js图片变暗,js特效代码) 更多的网页特效登录ab蓝学网下载 ...

win32 扫雷(添加鼠标经过特效)

扫雷,玩法不多说了,全部代码自己手动敲入,由于最近找工作原因 没有做菜单栏,没有选择难度。由于不太擅长坐标比例计算,所以做成了固定窗口大小。 空白区域扩张使用泛洪算法,其余的请参见详细代码,源码依旧...

鼠标经过旋转特效

.column { overflow: hidden; font-size: 0; } .justify_fix { display: inline-block; *display: inline;...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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