首页 建站教程 WEB前端 正文

纯CSS实现菜单炫酷点击展开收起效果

完整代码如下: 纯CSS菜单点击展开收起效果*, *:before, *:after { box-sizing:...

通过纯css3实现展开收缩的弹性动画菜单,可以应用于PC端或移动端页面中,非常实用效果也非常的炫酷,喜欢的码友们可以尝试一下,效果如下:

纯CSS实现菜单炫酷点击展开收起效果 CSS抽屉菜单 纯CSS菜单 点击展开收起效果 图1

完整代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS菜单点击展开收起效果</title>
<style>
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body:before, body:after {
  content: "";
  display: block;
  height: 50%;
  background: #00bdea;
}
body:after {
  background: #208FF9;
}

/* MAIN VARIABLES FOR CUSTOMIZATION */
/* -------------------------------- */
.nav {
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: 90px;
  margin-top: -45px;
  background: #fff;
  border-radius: 5px;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
}
.nav__cb {
  z-index: -1000;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
}
.nav__content {
  position: relative;
  width: 90px;
  height: 100%;
  -webkit-transition: width 1s cubic-bezier(0.49, -0.3, 0.68, 1.23);
  transition: width 1s cubic-bezier(0.49, -0.3, 0.68, 1.23);
}
.nav__cb:checked ~ .nav__content {
  -webkit-transition: width 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
  transition: width 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
  width: 410px;
}
.nav__items {
  position: relative;
  width: 410px;
  height: 100%;
  padding-left: 20px;
  padding-right: 110px;
  list-style-type: none;
  font-size: 0;
}
.nav__item {
  display: inline-block;
  vertical-align: top;
  width: 70px;
  text-align: center;
  color: #6C7784;
  font-size: 14px;
  line-height: 90px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  cursor: pointer;
}
.nav__item:hover {
  color: #00bdea;
}
.nav__item-text {
  display: block;
  height: 100%;
  -webkit-transform: rotateY(-70deg);
          transform: rotateY(-70deg);
  opacity: 0;
  -webkit-transition: opacity 0.7s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
  transition: opacity 0.7s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
  transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.7s;
  transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.7s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
}
.nav__cb:checked ~ .nav__content .nav__item-text {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
  opacity: 1;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
  transition: opacity 0.2s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
  transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.2s;
  transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.2s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
}
.nav__item:nth-child(1) .nav__item-text {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.nav__cb:checked ~ .nav__content .nav__item:nth-child(1) .nav__item-text {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav__item:nth-child(2) .nav__item-text {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.nav__cb:checked ~ .nav__content .nav__item:nth-child(2) .nav__item-text {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.nav__item:nth-child(3) .nav__item-text {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.nav__cb:checked ~ .nav__content .nav__item:nth-child(3) .nav__item-text {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.nav__item:nth-child(4) .nav__item-text {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav__cb:checked ~ .nav__content .nav__item:nth-child(4) .nav__item-text {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.nav__btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 90px;
  height: 90px;
  padding: 36px 31px;
  cursor: pointer;
}
.nav__btn:before, .nav__btn:after {
  content: "";
  display: block;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: #096DD3;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: background-color 0.3s, -webkit-transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
  transition: background-color 0.3s, -webkit-transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
  transition: transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3), background-color 0.3s;
  transition: transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3), background-color 0.3s, -webkit-transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
}
.nav__btn:before {
  margin-bottom: 10px;
}
.nav__btn:hover:before, .nav__btn:hover:after {
  background: #00bdea;
}
.nav__cb:checked ~ .nav__btn:before {
  -webkit-transform: translateY(7px) rotate(-225deg);
          transform: translateY(7px) rotate(-225deg);
}
.nav__cb:checked ~ .nav__btn:after {
  -webkit-transform: translateY(-7px) rotate(225deg);
          transform: translateY(-7px) rotate(225deg);
}
</style>
</head>
<body>
<nav class="nav">
  <input type="checkbox" class="nav__cb" id="menu-cb" />
  <div class="nav__content">
    <ul class="nav__items">
      <li class="nav__item">
        <span class="nav__item-text">
          Home
        </span>
      </li>
      <li class="nav__item">
        <span class="nav__item-text">
          Works
        </span>
      </li>
      <li class="nav__item">
        <span class="nav__item-text">
          About
        </span>
      </li>
      <li class="nav__item">
        <span class="nav__item-text">
          Contact
        </span>
      </li>
    </ul>
  </div>
  <label class="nav__btn" for="menu-cb"></label>
</nav>

<script>
</script>

</body>
</html>

此处为隐藏内容,请评论后查看隐藏内容,谢谢!

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/211.html

相关推荐

css中position:fixed如何实现相对于父级定位

css中position:fixed如何实现相对于父级定位

在项目开发中我们经常会用到position:fixed属性,它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间。当我们使用position:fixed定位属性时,它生...
WEB前端 2023.02.12 0 206
纯css实现菜单或列表循环向上滚动效果

纯css实现菜单或列表循环向上滚动效果

在前端开发过程中,有时候针对某个模块需要无限循环的滚动一些消息或菜单,我们常用的方法基本上都是通过js来实现,虽然代码相对来说可能会精简一些,但是对于JS不是很熟悉的同学来说还是不太好理解,毕竟相对于...
WEB前端 2022.08.17 0 855
纯CSS实现侧边栏浮动在线客服效果

纯CSS实现侧边栏浮动在线客服效果

很多人一般在网页的侧边会选择放一个悬浮的在线客服,方便意向客户的联系,网上随便一搜也会有很多代码提供,但是大多都是JS书写的,并且夹带着...
WEB前端 2022.08.17 0 434
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持