使用CSS3特效让你的页面菜单变得更加有趣
在这篇文章中,我们将介绍一些快速而有效的方法来实现CSS3的菜单特效。这里我们将添加干净漂亮的悬浮特效来给你的菜单添加更多乐趣。希望大家喜欢!
首先在每个菜单项目中我们包含一个带有俩个span元素的链接,如下:
- <ul class="mh-menu">
- <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;
- }
以上就是我们的幻灯效果,希望大家喜欢!
点击下载Demo
转自GBin1
【使用CSS3特效让你的页面菜单变得更加有趣】相关文章
4. jQuery快速实现自动隐藏/展示的页面顶端固定菜单效果
本文来源:https://www.51html5.com/a883.html
﹝使用CSS3特效让你的页面菜单变得更加有趣﹞相关内容
- IE10让你的网站拥有更多曝光
- 简单几步,让你的网站兼容IE10(1)
- 简单几步,让你的网站兼容IE10(2)
- 是时候让你的网站用上HTML5了
- 简单几步,让你的网站兼容IE10(3)
- 一款帮助你生成非常有趣的扇形扑克牌风格特效的jQuery插件-Baraja ...
- 一款帮助你生成非常有趣的扇形扑克牌风格特效的jQuery插件-Baraja ...
- 用CSS3设计响应式导航菜单
- 分享Jquery+CSS3实现的3D下拉菜单特效
- CSS3中的5个有趣的新技术