zoukankan      html  css  js  c++  java
  • 用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个子元素。

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

  • 相关阅读:
    校门外的树-poj
    [编程题]股票交易日
    2017计算机学科夏令营上机考试-C:岛屿面积
    2017计算机学科夏令营上机考试-B编码字符串
    2017计算机学科夏令营上机考试-A判决素数个数
    2017中国移动校园招聘考试试题一
    2017第八届蓝桥杯B组省赛C/C++程序设计大赛题解
    西科旧事的博客
    第八届蓝桥杯省赛题解
    微信小程序中的 event.target和event.currentTarget区别?
  • 原文地址:https://www.cnblogs.com/html5tricks/p/3660233.html
Copyright © 2011-2022 走看看