css实现菜单点击左侧弹出动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现菜单点击左侧弹出动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap"); * { box-sizing: border-box; } body { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #84a0f4; background-image: linear-gradient(to top, #84a0f4 0%, #c2e9fb 100%); font-family: "Montserrat", sans-serif; } .list-container { position: relative; } .list-container.active .more-button-list { opacity: 1; transform: scale(1); } .list-container.active .more-button-list-item { -webkit-animation: fadeInItem 0.6s 0.2s forwards; animation: fadeInItem 0.6s 0.2s forwards; } .list-container.active .more-button-list-item:nth-child(2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .list-container.active .more-button-list-item:nth-child(3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .list-container.active .more-button-list-item:nth-child(4) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .list-container.active .more-button { -webkit-animation: onePulse 0.6s forwards linear; animation: onePulse 0.6s forwards linear; } .list-container.active .menu-icon-wrapper { transform: rotate(-45deg); } .list-container.active .menu-icon-line.first { transform: rotate(-90deg) translateX(1px); } .list-container.active .menu-icon-line.last { transform: rotate(-90deg) translateX(-1px); } .more-button { background-color: #5c67ff; box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3); border-radius: 50%; width: 50px; height: 50px; border: none; padding: 0; cursor: pointer; transition: 0.2s ease-in; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; z-index: 2; } .more-button:hover, .more-button:focus { box-shadow: 0px 0px 0px 8px rgba(92, 103, 255, 0.3); background-color: #4854ff; } .more-button:focus { outline: 0; } .more-button-list { background-color: #fff; border-radius: 8px; list-style-type: none; width: 140px; height: 170px; box-shadow: 0px 0px 4px 4px rgba(150, 157, 249, 0.16); padding: 0; padding: 6px; position: absolute; right: 24px; bottom: 0; opacity: 0; transform: scale(0); transform-origin: bottom right; transition: all 0.3s ease 0.1s; } .more-button-list li { opacity: 0; } .more-button-list-item { display: flex; align-items: center; color: #1c3991; padding: 10px; border-radius: 4px; cursor: pointer; position: relative; transition: 0.2s ease-in; transform: translatex(-10px); } .more-button-list-item:hover { color: #5c67ff; } .more-button-list-item:after { content: ""; position: absolute; height: 1px; width: calc(100% - 24px); left: 12px; bottom: 0; background-color: rgba(132, 160, 244, 0.1); } .more-button-list-item:last-child:after { display: none; } .more-button-list-item svg { width: 18px; height: 18px; } .more-button-list-item span { display: inline-block; line-height: 20px; font-size: 14px; margin-left: 8px; } @-webkit-keyframes onePulse { 0% { box-shadow: 0px 0px 0px 0px rgba(92, 103, 255, 0.3); } 50% { box-shadow: 0px 0px 0px 12px rgba(92, 103, 255, 0.1); } 100% { box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3); } } @keyframes onePulse { 0% { box-shadow: 0px 0px 0px 0px rgba(92, 103, 255, 0.3); } 50% { box-shadow: 0px 0px 0px 12px rgba(92, 103, 255, 0.1); } 100% { box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3); } } @-webkit-keyframes fadeInItem { 100% { transform: translatex(0px); opacity: 1; } } @keyframes fadeInItem { 100% { transform: translatex(0px); opacity: 1; } } .socials { position: fixed; bottom: 16px; right: 16px; display: flex; align-items: center; } .social-link { color: #fff; display: flex; align-items: center; cursor: pointer; text-decoration: none; margin-right: 12px; } .menu-icon-wrapper { border-radius: 2px; width: 20px; height: 20px; display: flex; flex-direction: column.........完整代码请登录后点击上方下载按钮下载查看
网友评论0