鼠标经过样式-常用

原创 2016年08月30日 13:30:46

前后翻转:

<style type="text/css">
 *{margin:0px;padding:0px;}
 #nav{width:280px;height:500px;margin:50px;perspective:400px;float:left;}
 #nav p{height:40px;width:200px;font-size:18px;font-family:"微软雅黑";text-align:center;line-height:40px;}
 #nav ul li{width:200px;height:40px;list-style:none;position:relative;transform-style:preserve-3d;transition:0.5s;
  display:block;margin:1px;cursor:pointer;}
 #nav ul li:hover{transform:translateZ(30px) rotateX(360deg) scale(1.1);}
 #nav ul li div:nth-child(1){height:40px;width:200px;background:#f96;}
 #nav ul li div p{font-size:16px;font-family:"微软雅黑";text-align:center;line-height:40px;}

</style>


<div id="nav">
<ul>
<li>
<div><p>Home</p></div></li>
<li>
<div><p>javascript</p></div></li>
<li>
<div><p>div+css</p></div></li>
<li>
<div><p>Tel</p></div></li>
<li>
<div><p>Abouet</p></div></li>
</ul>
<p>前后翻转</p>

</div>


上浮:

<style type="text/css">
 *{margin:0px;padding:0px;}
 #nav{width:280px;height:500px;margin:50px;perspective:400px;float:left;}
 #nav p{height:40px;width:200px;font-size:18px;font-family:"微软雅黑";text-align:center;line-height:40px;}
 #nav ul li{width:200px;height:40px;list-style:none;position:relative;transform-style:preserve-3d;transition:0.5s;display:block;margin:1px;cursor:pointer;}
 #nav ul li div:nth-child(1){height:40px;width:200px;background:#f96;}
 #nav ul li div p{font-size:16px;font-family:"微软雅黑";text-align:center;line-height:40px;}
 #nav ul li:hover{transform:translateZ(30px) scale(1.1);}
</style>


<div id="nav">
<ul>
<li>
<div><p>Home</p></div></li>

<li>
<div><p>javascript</p></div></li>
<li>

<div><p>div+css</p></div></li>
<li>
<div><p>Tel</p></div></li>
<li>
<div><p>Abouet</p></div></li>
</ul>
<p>上浮</p>
</div>


左右翻转:

<style type="text/css">
 *{margin:0px;padding:0px;}
 #nav{width:280px;height:500px;margin:50px;perspective:400px;float:left;}
 #nav p{height:40px;width:200px;font-size:18px;font-family:"微软雅黑";text-align:center;line-height:40px;}
 #nav ul li{width:200px;height:40px;list-style:none;position:relative;transform-style:preserve-3d;transition:0.5s;display:block;margin:1px;cursor:pointer;}
 #nav ul li div:nth-child(1){height:40px;width:200px;background:#f96;}
 #nav ul li div p{font-size:16px;font-family:"微软雅黑";text-align:center;line-height:40px;}
 #nav ul li:hover{transform:rotateY(360deg) scale(1.1);}
</style>


<div id="nav">
<ul>
<li>
<div><p>Home</p></div></li>
<li>
<div><p>javascript</p></div></li>
<li>
<div><p>div+css</p></div></li>
<li>
<div><p>Tel</p></div></li>
<li>
<div><p>Abouet</p></div></li>
</ul>
<p>左右翻转</p>
</div>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

响应式图片列表鼠标经过放大效果样式代码

主要使用CSS3的box-sizing:border-box;属性来设置按照百分比布局的样式。结合媒体查询判断页面宽度设置区块的响应式展示。并添加了一些hover属性的动画过度效果。熟悉transfo...

常用鼠标经过遮罩层动画效果

  • 2015年12月14日 10:17
  • 181KB
  • 下载

扩展:easyui datagrid鼠标经过提示单元格内容

原文地址:http://www.easyui.info/archives/796.html 扩展:datagrid鼠标经过提示单元格内容 实现代码: /** * 扩展两个方法 */ ...

鼠标经过时放大效果

  • 2017年07月16日 15:00
  • 387KB
  • 下载

鼠标经过图片放大

  • 2017年07月30日 11:39
  • 1KB
  • 下载

鼠标经过地方图片变亮,其他图片变暗效果 ,jq or css

效果的原理 原理其实很简单,首先给一个黑色的背景,通过降低图片的透明度,让黑色背景呈现出来,图片看起来就更暗。鼠标移到图片1,那么就让除了图片1的其他图片的透明度降低,让他们看起来更暗,让图片1看起...
  • ximo
  • ximo
  • 2012年09月11日 17:44
  • 2759

鼠标经过不同标签触发不同背景

  • 2016年02月19日 11:04
  • 509KB
  • 下载

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

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

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