CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 使用CSS3特效让你的页面菜单变得更加有趣

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


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

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

  1. <ul class="mh-menu">
  2.     <li>
  3.         <a href="#">
  4.             <span>Art Director</span>
  5.             <span>Henry James</span>
  6.         </a>
  7.         <img src="images/1.jpg" alt="image01"/>
  8.     </li>
  9.     <!-- ... -->
  10. </ul>
复制代码

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

  1. .mh-menu li:hover a{
  2.     background: rgba(225,239,240, 0.4);
  3. }
复制代码

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

  1. .mh-menu li a span:nth-child(2){
  2.     /*...*/
  3.     transition: color 0.2s linear;
  4. }
  5. .mh-menu li:nth-child(1):hover span:nth-child(2){
  6.     color: #ae3637;
  7. }
  8. .mh-menu li:nth-child(2):hover span:nth-child(2){
  9.     color: #c3d243;
  10. }
  11. .mh-menu li:nth-child(3):hover span:nth-child(2){
  12.     color: #d38439;
  13. }
  14. .mh-menu li:nth-child(4):hover span:nth-child(2){
  15.     color: #8e7463;
  16. }
复制代码

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

  1. .mh-menu li img{
  2.     position: absolute;
  3.     z-index: 1;
  4.     left: 0px;
  5.     top: 0px;
  6.     opacity: 0;
  7.     transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
  8. }
  9. .mh-menu li:hover img{
  10.     left: 300px;
  11.     opacity: 1;
  12. }
复制代码

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


点击下载Demo  



转自GBin1


【使用CSS3特效让你的页面菜单变得更加有趣】相关文章

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

2. 7个步骤:让JavaScript变得更好

3. 利用CSS3特性和浏览器中的工具进行网页设计

4. jQuery快速实现自动隐藏/展示的页面顶端固定菜单效果

5. 超赞的页面加载进度自动指示和 Ajax 导航效果

6. 快速响应用户的页面滚动操作

7. HTML 5特效页面及js测试页面汇总推荐

8. 更加强大的下一代 Node.js Web 框架

9. FormatJS – 让你的 Web 应用程序国际化

10. 《实用技巧》—让你的网站变成响应式的3个简单步骤

本文来源:https://www.51html5.com/a883.html

点击展开全部

﹝使用CSS3特效让你的页面菜单变得更加有趣﹞相关内容

「使用CSS3特效让你的页面菜单变得更加有趣」相关专题

css

其它栏目

也许您还喜欢