gsap+svg实现弹跳式导航条导航栏效果代码
代码语言:html
所属分类:菜单导航
代码描述:gsap+svg实现弹跳式导航条导航栏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); body { background-color: #320027; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: "Poppins", sans-serif; box-sizing: border-box; } body .container { background-color: white; width: 320px; height: 120px; border-radius: 30px; box-shadow: 0px 5px 10px 10px rgba(0, 0, 0, 0.01); position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 60px; } body .container svg { height: 40px; width: 40px; stroke: #ff5157; cursor: pointer; z-index: 10; } body .container .fake { position: absolute; width: 350px; height: 120px; bottom: 0; padding-top: 300px; padding-left: 30px; padding-right: 30px; overflow: hidden; left: 50%; transform: translate(-50%); pointer-events: none; } body .container .fake .circle { height: 70px; width: 70px; border-radius: 50%; background-color: #ff5157; position: absolute; bottom: -50px; } body .credits { position: absolute; right: 0; bottom: 0; padding: 20px; color: #595e64; font-weight: 500; } body .credits p a { font-weight: bold; text-decoration: none; color: #595e64; } </style> </head> <body> <div class="container"> <svg id="box" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" /> </svg> <svg id="home" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> </svg> <svg id="calendar" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> <div class="fake&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0