菜单悬浮弹出动画效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .wrapper { --background: #62ABFF; --icon-color: #414856; --shape-color-01: #B8CBEE; --shape-color-02: #7691E8; --shape-color-03: #FDD053; --width: 90px; --height: 90px; --border-radius: var(--height); width: var(--width); height: var(--height); position: relative; border-radius: var(--border-radius); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .wrapper .btn { background: var(--background); width: var(--width); height: var(--height); position: relative; z-index: 3; border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; -webkit-animation: plus-animation-reverse .5s ease-out forwards; animation: plus-animation-reverse .5s ease-out forwards; } .wrapper .btn::before, .wrapper .btn::after { content: ""; display: block; position: absolute; border-radius: 4px; background: #fff; } .wrapper .btn::before { width: 4px; height: 28px; } .wrapper .btn::after { width: 28px; height: 4px; } .wrapper .tooltip { width: 90px; height: 75px; border-radius: 70px; position: absolute; background: #fff; z-index: 2; padding: 0 15px; box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); opacity: 0; top: 0; display: -webkit-box; display: flex; justify-content: space-around; -webkit-box-align: center; align-items: center; -webkit-transition: opacity .15s ease-in, top .15s ease-in, width .15s ease-in; transition: opacity .15s ease-in, top .15s ease-in, width .15s ease-in; } .wrapper .tooltip > svg { width: 100%; height: 26px; display: -webkit-box; display: flex; justify-content: space-around; -webkit-box-align: center; align-items: center; cursor: pointer; } .wrapper .tooltip > svg .icon { fill: none; stroke: var(--icon-color); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; opacity: .4; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; } .wrapper .tooltip > svg:hover .icon { opacity: 1; } .wrapper .tooltip::after { content: ""; width: 20px; height: 20px; background: #fff; border-radius: 3px; position: absolute; left: 50%; margin-left: -10px; botto.........完整代码请登录后点击上方下载按钮下载查看
网友评论0