div+css实现伸缩透明的左侧菜单栏效果代码
代码语言:html
所属分类:菜单导航
代码描述:div+css实现伸缩透明的左侧菜单栏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); /* DEFAULT VALUES */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } nav { user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; } nav > ul, nav > ul > li { outline: 0; } nav > ul > li > a { text-decoration: none; } body { min-height: 100vh; background: linear-gradient(90deg, #aea4e3, #d3ffe8); } /* MAIN MENU */ .main-menu { position:fixed; top: 0; left: 0; height: 100%; width: 60px; overflow:hidden; background: #0009; transition: width .05s linear; -webkit-transition: width .05s linear; z-index: 10; padding-top: 10px; } .main-menu:hover { width: 180px; overflow:visible; } .main-menu > ul > li { position: relative; display: block; width: 180px; } .main-menu > ul > li > a { display: flex; flex-direction: row; align-items: center; justify-content: center; color:#999; font-size: 1rem; transition:all .1s linear; -webkit-transition:all .1s linear; padding: 10px 0; } .nav-icon { width: 60px; height: 20px; font-size: 20px; text-align: center; } .nav-text { width: 120px; height: 20px; font-family: "Mulish", sans-serif; } .logout { position: absolute; left: 0; bottom: 0; } .main-menu li:hover > a, .main-menu li.active > a, .main-menu li > a:focus { text-decoration: none; color: #fff; background-color: rgb(29, 79, 215, 0.7); } /* ANIMATED BACKGROUND */ .container { background:#1F2024; min-height: 100vh; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .blob-c { min-height: 100vh; overflow: hidden; position:absolute; width: 100%; filter: blur(40px); /* background: rgba(255,255,255,0.1) */ } .shape-blob { background:#26C3F9; height: 60px; width: 80px; border-radius: 40% 50% 30% 40%; animation: transform 18s ease-in-out infinite both alternate, movement_one 12s ease-in-out infinite both; opacity:.7; position: absolute; left: 75%; top: 40%; } .shape-blob.one{ background:#0085FF; height: 150px; width: 200px; left: 10px; top: 10px; transform: rotate(-180deg); animation: transform 8s ease-in-out infinite both alternate, movement_two 20s ease-in-out infinite both; } .shape-blob.six{ background:#0EAFFF; height: 70px; width: 100px; left: 160px; top: 200px; transform: rotate(-180deg); animation: transform 5s ease-in-out infinite both alternate, movement_two 5s ease-in-out infinite both; } .shape-blob.four{ background:#4EAEFF; height: 100px; width: 80px; left: 350px; top: 60px; transform: rotate(-180deg); animation: transform 17s ease-in-out infinite both alternate, movement_two 13s ease-in-out infinite both; } .shape-blob.five{ background:#0085FF; height: 100px; width: 80px; left: 480px; top: 30px; transform: rotate(-180deg); animation: transform 12s ease-in-out infinite both alternate, movement_two 18s ease-in-out infinite both; } .shape-blob.two{ background:#4EAEFF; height: 150px; width: 150px; left: 600px; top: 150px; transform: rotate(-180deg); animation: transform 10s ease-in-out infinite both alternate, movement_two 10s ease-in-out infinite both; } .shape-blob.three{ background:#0EAFFF; height: 150px; width: 150px; left: 800px; top: 30px; transform: rotate(-180deg); animation: transform 7s ease-in-out infinite both alternate, movement_two 23s ease-in-out infinite both; } @keyframes transform { 0%, 100% { border-radius: 33% 67% 70% 30% / 30% 40% 70% 70%; } 20% { border-radius: 37% 63% 51% 49% / 37% 35% 35% 63%; } 40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 26%; } 60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 73%; } 80% { border-radius: 40% 60% 42% 58% / 51% 51% 49% 59%; } } @keyframes movement_one { 0%, 100% { transform: none; } 50% { transform: translate(50%, 20%) rotateY(10deg) scale(1); } } @keyframes movement_two { 0%, 500% { transform: none; } 50% { transform: translate(50%, 20%) rotate(-200deg) scale(1.3);} } /* CARD */ section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 80px 40px 40px 80px; } .card { width: mi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0