概念菜单特效-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.3.........完整代码请登录后点击上方下载按钮下载查看

概念菜单特效

网友评论0

css实现鼠标悬浮文字菜单依次翻滚动画效果代码

SplitText实现鼠标悬浮文字菜单依次翻滚动画效果代码

div+css实现文字提示图标导航条菜单效果代码

js+css实现炫酷伸缩环状子菜单按钮代码

gsap实现有回弹效果的文字菜单鼠标悬浮效果代码

css实现自适应导航条效果代码

css实现全屏覆盖弹出导航条效果代码

gsap实现左侧弹出式多级菜单栏效果代码

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

div+css实现黑色酷炫导航菜单效果代码