伸缩菜单特效-html代码-BFW代码库

伸缩菜单特效

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.1/css/all.css'>
<style>
/* basic style */
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1c2026;
}

/* menu style */
.menu {
  width: calc(54px * 4 + 30px * 3);
  height: 54px;
  margin: 0 auto;
  -webkit-filter: url("#goo");
  filter: url("#goo");
}

ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  cursor: pointer;
}

svg {
  overflow: hidden;
}

.ico01 {
  background-color: #d92567;
  position: relative;
  z-index: 4;
}

.ico02 {
  background-color: #d91e85;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 3;
}

.ico03 {
  background-color: #f24405;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
  z-index: 2;
}

.ico04 {
  background-color: #f23030;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  z-index: 1;
}

.move-ico {
  position: absolute;
  top: 0;
}

.active .ico02 {
  transform: translateX(calc(54px + 30px));
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
}
.active .ico03 {
  transform: translateX(calc(54px * 2 + 30px * 2));
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
}
.active .ico04 {
  transform: translateX(calc(54px * 3 + 30px * 3));
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

/* menu-object style */
.menu-object {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: calc(54px * 4 + 30px * 3);
  height: 54px;
}
.menu-object .ico01::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 24px;
  margin: auto;
  background-color: #fff;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.menu-object .ico01::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 4px;
  margin: auto;
  background-color: #fff;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.menu-object .link {
  display: block;
  width: 100%;
  height: 100%;
  color:.........完整代码请登录后点击上方下载按钮下载查看

伸缩菜单特效

网友评论0

div+css实现底部横线菜单切换窗口效果代码

div+css实现横向鼠标悬停翻转文字导航菜单效果代码

react+use-web-animations实现横向和竖向图标菜单滑动效果代码

js+css实现滑动图标导航菜单效果代码

matter实现自由落体重力下落的导航菜单效果代码

div+css实现下拉菜单代码

div+css实现左侧悬浮伸缩菜单代码

div+Css实现手风琴二级菜单折叠效果代码

div+css实现二级下拉菜单导航效果代码

css+div实现左侧垂直伸缩菜单导航条代码