高亮导航菜单动画效果
代码语言:html
所属分类:菜单导航
代码描述:高亮导航菜单动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet'> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #121212; cursor: none; } .cursor { width: var(--size); height: var(--size); border-radius: 50%; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; z-index: 100; } .cursor--large { --size: 40px; border: 1px solid #ff3c3c; } .cursor--small { --size: 10px; background: #ff3c3c; } main { display: flex; flex-wrap: wrap; justify-content: center; } main button { --size: 60px; border: none; min-width: var(--size); min-height: var(--size); display: flex; justify-content: center; align-items: center; font-size: 1.2rem; background: rgba(255, 255, 255, 0.08); color: #fff; transition: background 200ms ease, color 200ms ease; cursor: none; } main:hover button { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.04); } main:hover button:hover { color: #fff; } .support { position: absolute; right: 10px; bottom: 10px; padding: 10px; display: flex; } .support a { margin: 0 10px; color: #fff; font-size: 1.8rem; backface-visibility: hidden; transition: all 150ms ease; } .support a:hover { transform: scale(1.1); } </style> </head> <body translate="no"> <main> <button> <ion-icon name="logo-facebook"></ion-icon> </button> <button> <ion-icon name="logo-twitter"></ion-icon> </button> <button> <ion-icon name="logo-instagram"></ion-icon> </button> <button> <ion-icon name="logo-youtube"></ion-icon> </button> <button> <ion-icon name="logo-dribbble"></ion-icon> </button> </main> <div class="cursor cursor--large"></div> <div class="cursor cursor--small"></div> <div class="support"> <a href="https://twitter.com/DevLoop01" target=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0