鼠标经过样式-常用

原创 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...

滚动字幕,鼠标经过停留

做了一天的滚动字幕,鼠标经过停留,终于弄出来了,给大家总结下代码如下,直接可复制粘贴用,希望对大家有所帮助,如有问题,联系qq:523132661  无标题文档 window....
  • hljflp
  • hljflp
  • 2011-12-19 09:27
  • 1760

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

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

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

鼠标经过,提示框

html元素如下: 搜索 注意:其中设置提示框的定位方式为absolute,绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果没有已定位的祖先元素,那么它的...
  • bits00
  • bits00
  • 2011-12-08 12:42
  • 1920

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

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

JS实现侧边栏鼠标经过弹出框+缓冲效果

可能这个标题起得不够恰当,简单来说就是:当鼠标移到最左侧时,移出一个框。 首先,我们用两个div来简单布局以下页面: 分享到 这个分享框的弹出原理是:把内层div定位到外层div最右侧紧贴,...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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