使用CSS3特效让你的页面菜单变得更加有趣

标签: css3 特效 页面 | 发表时间:2012-03-21 17:17 | 作者:gbin1
出处:http://www.cnblogs.com/

日期:2012/03/20  来源: GBin1.com

css3 menu

在线演示

在这篇文章中,我们将介绍一些快速而有效的方法来实现CSS3的菜单特效。这里我们将添加干净漂亮的悬浮特效来给你的菜单添加更多乐趣。希望大家喜欢!

首先在每个菜单项目中我们包含一个带有俩个span元素的链接,如下:

<ul >  
<li>
<a href="#">
<span>Art Director</span>
<span>Henry James</span>
</a>
<img src="images/1.jpg" alt="image01"/>
</li>
<!-- ... -->
</ul>

我们赋予这个.mh-mnu li a的属性diplay=block并且rgba(255,255,255, 0.8)作为背景色。当悬浮后,颜色变为rgba(225,239,240, 0.4),如下:

.mh-menu li:hover a{  
background: rgba(225,239,240, 0.4);
}

第二个span将在悬浮中变化颜色。并且我们添加过渡效果

.mh-menu li a span:nth-child(2){  
/*...*/
transition: color 0.2s linear;
}
.mh-menu li:nth-child(1):hover span:nth-child(2){
color: #ae3637;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
color: #c3d243;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
color: #d38439;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
color: #8e7463;
}

图片幻灯将会向右显示。我们添加透明过渡效果,从0到1

.mh-menu li img{  
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
opacity: 0;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
left: 300px;
opacity: 1;
}

以上就是我们的幻灯效果,希望大家喜欢!

via tympanus

来源:

使用CSS3特效让你的页面菜单变得更加有趣

本文链接

相关 [css3 特效 页面] 推荐:

使用CSS3特效让你的页面菜单变得更加有趣

- - 博客园_首页
日期:2012/03/20  来源: GBin1.com. 在这篇文章中,我们将介绍一些快速而有效的方法来实现CSS3的菜单特效. 这里我们将添加干净漂亮的悬浮特效来给你的菜单添加更多乐趣. 首先在每个菜单项目中我们包含一个带有俩个span元素的链接,如下:. 我们赋予这个.mh-mnu li a的属性diplay=block并且rgba(255,255,255, 0.8)作为背景色.

CSS3 Region:基于HTML和CSS3的富页面布局

- John - 前端观察
译自:CSS3 regions: Rich page layout with HTML and CSS3. 中文:CSS3 Region:基于HTML和CSS3的富页面布局. 请尊重版权,转载请注明来源,多谢. 互联网已经成为一个提供参考、教材、新闻、文章和交互应用的大宝库了. 然而,当为印刷设计内容时,一些功能显然仍然不可能或者很难使用Web标准来实现.

【外刊IT评论网】CSS3的动画特效

- iVane - 外刊IT评论
如果你使用的是火狐浏览器或谷歌浏览器,你会发现在浏览本站时看到的界面会比使用IE6或IE7浏览时要漂亮的多,因为在这些页面上使用了CSS3里某些特效,比如圆角效果(border-radius),阴影效果(box-shadow)等. CSS3比CSS2增加了很多神奇的东西,但由于CSS3标准还比较新,只有少数的现代浏览器支持这些特效,但随着火狐和谷歌浏览器的慢慢普及,相信不久所有的网站都会开始使用CSS3.

【转载】使用HTML5/CSS3快速制作便签贴特效

- - HTML5研究小组
本篇文字将展示给你的是,如何利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下:. (注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!). 注:该效果可以在Safari, Chrome,Firefox和Opera在看到效果,IE上由于对HTML5的支持不完全,所以看不出效果.

【转载】基于jQuery&CSS3的HTML5 portfolio特效制作

- - HTML5研究小组
在本教程中,我们将完成一个不错的基于jQuery和Quicksand插件的HTML5 portfolio特效. 它支持定制,因此,你完全可以扩展实现更多功能. 【e800编译】在本教程中,我们将完成一个不错的基于. jQuery和Quicksand插件的HTML5portfolio特效. 它支持定制,因此,你完全可以扩展实现更多功能.

使用 HTML5 和 CSS3 制作登录页面完整步骤

- Amo - HTML5研究小组
本文详细介绍使用 HTML5 和 CSS3 制作一个登录页面的完整过程. 所用到的 HTML5 的特性:. placeholder – 输入框的简短提示,当该输入框获得输入焦点时,该提示信息自动消失. required – 指定该输入元素是否必须提供. autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点.

使用HTML与CSS3进行富页面布局

- - InfoQ cn
长久以来,复杂布局一直是印刷媒体的一个主要关注点. 出版物如杂志、报纸上固有的物理限制导致它们创造了非常复杂的流布局. 在这样的布局中,内容可以跨越多个列显示并且可以环绕在图片和表格周围进行编排. 布局需要能够在整个排版过程中随着内容添加和改变进行动态调整. Adobe正通过向W3C提案 CSS Regions Module与 CSS Exclusions Module,力图将该层次的布局控制引入到Web中.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

CSS3 代码生成工具:Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性,而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久,各个浏览器厂商还在开发中,有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂,一旦写错就会导致出现问题. 为此,有人开发了一个生成 CSS3 代码的工具 Create CSS3.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.