概念菜单特效-html代码-BFW代码库

代码语言：html

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

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

<title> Menu concept (hot corners)</title>

<style>
      @font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Teko Regular'), local('Teko-Regular'), url(https://fonts.gstatic.com/s/teko/v8/LYjNdG7kmE0gfaN9oA.ttf) format('truetype');
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none;
}
html {
  font-family: 'Teko', sans-serif;
  font-size: calc(14px + ((100vw - 400px) / 80));
  line-height: 1.5;
}
@media screen and (max-width: 400px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 1200px) {
  html {
    font-size: 24px;
  }
}
body {
  height: 100%;
  overflow: hidden;
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
.navigation {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}
.navigation__link {
  position: absolute;
}
.navigation__link:nth-of-type(1) {
  top: 9rem;
  left: 9rem;
}
.navigation__link:nth-of-type(2) {
  top: 9rem;
  right: 9rem;
}
.navigation__link:nth-of-type(3) {
  right: 9rem;
  bottom: 9rem;
}
.navigation__link:nth-of-type(4) {
  left: 9rem;
  bottom: 9rem;
}
.navigation__link::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  height: 5rem;
  width: 5rem;
  display: block;
  border: 2px solid #ffffff;
  border-radius: 50%;
  transition: -webkit-transform 0.3s cubic-bezier(0.36, 0.02, 0.25, 1.31);
  transition: transform 0.3s cubic-bezier(0.36, 0.02, 0.25, 1.31);
  transition: transform 0.3s cubic-bezier(0.36, 0.02, 0.25, 1.31), -webkit-transform 0.3s cubic-bezier(0.36, 0.02, 0.25, 1.31);
}
.navigation__link:hover::after {
  -webkit-transform: translateX(-50%) translateY(-50%) scale(2);
          transform: translateX(-50%) translateY(-50%) scale(2);
}
.navigation__title {
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  font-size: 1.5rem;
}
.navigation__text {
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  opacity: 0;
}
.navigation__text--active {
  opacity: 1;
}
.navigation__text-layer {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  font-size: 10rem;
}
@-webkit-keyframes move-layer-left {
  from {
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
  }
  50% {
    -webkit-transform: translateX(calc(-50% - 5px)) translateY(-50%);
            transform: translateX(calc(-50% - 5px)) translateY(-50%);
  }
  to {
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
  }
}
@keyframes move-layer-left {
  from {
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
  }
  50% {
    -webkit-transform: translateX(calc(-50% - 5px)) translateY(-50%);
            transform: translateX(calc(-50% - 5px)) translateY(-50%);
  }
  to {
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
  }
}
@-webkit-keyframes move-layer-right {
  from {
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
  }
  50% {
    -webkit-transform: translateX(calc(-50% + 5px)) translateY(-50%);
            transform: translateX(calc(-50% + 5px)) translateY(-50%);
  }
  to {
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
  }
}
@keyframes move-layer-right {
  from {
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
  }
  50% {
    -webkit-transform: translateX(calc(-50% + 5px)) translateY(-50%);
            transform: translateX(calc(-50% + 5px)) translateY(-50%);
  }
  to {
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
  }
}
.navigation__text-layer:nth-of-type(1) {
  z-index: 1;
}
.navigation__text-layer:nth-of-type(2) {
  color: #25CED1;
}
.navigation__text-layer:nth-of-type(3) {
  color: #EA526F;
}
.navigation__text-layer--glitch:nth-of-type(2) {
  -webkit-animation: move-layer-left 0.5s cubic-bezier(0.36, 0.02, 0.25, 1.31);
          animation: move-layer-left 0.5s cubic-bezier(0.36, 0.02, 0.25, 1.31);
}
.navigation__text-layer--glitch:nth-of-type(3) {
  -webkit-animation: move-layer-right 0.5s cubic-bezier(0.36, 0.02, 0.25, 1.31);
          animation: move-layer-right 0.5s cubic-bezier(0.36, 0.02, 0.25, 1.31);
}
.cursor-replacement {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  height: 100vh;
  width: 100vw;
}

    </style>

</head>
<body translate="no">

<div class="navigation">
<div class="navigation__title">URSA MAJOR SUPERCLUSTER</div>
<div class="wrapper"><a class="navigation__link" href=""></a><a class="navigation__link" href=""></a><a class="navigation__link" href=""></a><a cl.........完整代码请登录后点击上方下载按钮下载查看

概念菜单特效

网友评论0

css实现简洁导航条点击滑动效果代码

css实现带右侧弹出框的顶部菜单栏效果代码

svg+js实现可折叠左侧垂直菜单导航条效果代码

svg+css实现炫酷图标导航条点击动画效果代码

div+css布局实现顶部导航条消息通知点击下拉显示消息列表效果代码

jquery+css实现粘性导航菜单页面代码

css+svg实现图标导航栏选中切换动画效果代码

css实现立体块状菜单悬浮模糊效果代码

css+js实现图标菜单点击排列动画效果代码

svg+css实现自适应黑白主题切换的顶部菜单效果代码