css实现阴影位移菜单效果代码

代码语言:html

所属分类:菜单导航

代码描述:css实现阴影位移菜单效果代码

代码标签: 位移 菜单 效果

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
.shadow-button-set {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5vmin;
}
  
  .shadow-button-set > li {
    display: inline-flex;
    background: black;
  }
  
  .shadow-button-set > li:is(:hover, :focus-within) > button:not(:active) {
      --distance: -10px;
    }
  
  .shadow-button-set button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    outline: none;
    font-size: 5vmin;
    border: 3px solid black;
    background: white;
    
    --distance: 0;
    transform: translateX(var(--distance)) tr.........完整代码请登录后点击上方下载按钮下载查看

网友评论0