用CSS3制作很特别的波浪形菜单

原文:用CSS3制作很特别的波浪形菜单

网页菜单我们见过很多，各种炫酷的、实用的菜单比比皆是。昨天我看到一款很特别的CSS3菜单，它的外形是波浪形的，弯弯曲曲，结合背景，看上去还挺不错的，下面看下一效果图。

我想说可能菜单并不是很实用，但是很有创意，而且也方便我们学习CSS3。

当然，你可以到这里查看DEMO演示。

接下来我们来对这款波浪形菜单的源代码简单分析一下。

HTML代码的结构非常简单：

<nav class='b-nav'><ul class='b-menu'><li><a href='#'>☁</a></li><li><a href='#'>☀</a></li><li><a href='#'>☃</a></li><li><a href='#'>☂</a></li><li><a href='#'>❆</a></li><li><a href='#'>☾</a></li></ul>
</nav>

然后是CSS代码，这里我们对菜单项进行绝对定位

.b-menu li {overflow: hidden;position: absolute;width: 12em; height: 12em;
}

接着就是重点的波浪形效果的CSS代码了，这里主要利用了CSS3的transform动画属性，利用rotate进行旋转，skewY进行y轴倾斜。

.b-menu li:nth-child(-n+3) {top: 0.66em; left: -5.68em;transform-origin: 100% 100%;
}
.b-menu li:nth-child(n+4) {right: -5.69em; bottom: 0.66em;transform-origin: 0 0;
}
.b-menu li:first-child {transform: skewY(67.5deg);
}
.b-menu li:nth-child(2) {transform: rotate(22.5deg) skewY(67.5deg);
}
.b-menu li:nth-child(3) {transform: rotate(45deg) skewY(67.5deg);
}
.b-menu li:nth-child(4) {transform: skewY(67.5deg);
}
.b-menu li:nth-child(5) {transform: rotate(22.5deg) skewY(67.5deg);
}
.b-menu li:last-child {transform: rotate(45deg) skewY(67.5deg);
}
.b-menu a, .b-menu li:after {position: absolute;border-radius: 50%;box-shadow: 0 0 .2em black, inset 0 0 .2em black;transform: skewY(-67.5deg) rotate(-11.25deg);
}

这里说明一下nth-child(n)，它表示该父元素的第n个子元素。

最后附上该波浪形菜单的源代码。源码下载地址>>

posted on 2014-04-12 20:09 NET未来之路阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/3661125.html

用CSS3制作很特别的波浪形菜单相关推荐

纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
css3制作左右拉伸动画菜单
微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...
纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码
本文作者html5tricks,转载请注明出处对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...
纯CSS3制作卡通场景汽车动画效果
前言今天分享一下我昨晚做的CSS3动画效果--卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画如 ...
css制作漂亮彩带导航条菜单
点击这里查看效果: http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: 1 <!DOCTYPE html PUBLIC " ...
html怎样做登录页面,使用HTML 5和CSS3制作登录页面完整步骤
本文详细介绍使用HTML 5 和CSS3 制作一个登录页面的完整过程. login.html Log In Forgot your password?Register 所用到的HTML 5的特性: ◆ ...
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...
CSS3制作文字特效
今天主要搜集了一些网页中文字用css3制作的特效,并亲自尝试了一下,现把关键的代码和效果贴出来与同学们一起分享,希望能对大家在平时的制作中有所帮助.废话不说,直接进入效果的制作,感兴趣的同学跟着我的代 ...

用CSS3制作很特别的波浪形菜单

用CSS3制作很特别的波浪形菜单相关推荐

最新文章

热门文章