悬浮菜单弹出动画效果-html代码-BFW代码库

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> - Mobile Menu</title>
    <style>
:root {
        --blue: #008EFA;
        --pink: #FF207A;
        --bg: #EEEEEE;
        --white: #FEFEFE;
    }
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            background-color: var(--bg);


        }
        .main {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            width: 300px;
            height: 200px;
            position: relative;
        }
        .menu {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 300px;
            height: 100px;
            padding: 30px;

            border-radius: 5px;
            box-shadow: 0 0 5px 1px rgba(0,0,0,.05);
            background-color: var(--white);
        }
        .menu__trigger {
            position: absolute;
            top: 50px;
            left: calc(50% - 50px);
            width: 100px;
            height: 100px;
            background-color: var(--blue);
            border: 10px solid var(--bg);
            border-radius: 50%;
            padding: 20px;
            cursor: pointer;
            transition: .35s ease;
        }
        .menu__base {
            width: 20px;
            height: 20px;
            object-fit: contain;
            opacity: .7;
        }
        .menu__item {
            position: absolute;
            width: 60px;
            height: 60px;
            top: 70px;
            padding: 20px;
            border-radius: 50%;


            background-color: var(--white);
            border: none;
            box-shadow: 0 0 5px 1px rgba(0,0,0,.05);
            z-index: -1000;
            opacity: 0;
        }
        .menu__item--0 {
            transition: .35s ease;
            left: calc(50% - 30px);
        }
        .menu__item--1 {
            transition: .35s ease .1s;
            left: calc(50% - 30px);
        }
        .menu__item--2 {
            transition: .35s ease .2s;
            right: calc(50% - 30px);
        }

        .is-rotate {
            transform: rotateZ(225deg);
            background-color: var(--pink);
        }
        .item-0 {
            top: 20px;
            left: calc(50% - 110px);
            opacity: 1;
        }
        .item-1 {
            top: -25px;
            left: calc(50% - 30px);
            opacity: 1;
        }
        .item-2 {
            top: 20px;
            right: calc(50% - 110px);
            opacity: 1;
        }

    </style>

</head>
<body translate="no">

    <div class="main">
        <div class="menu">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMnB4IiB2ZXJzaW9uPSIxLjEiIHZp%0D%0AZXdCb3g9IjAgMCAxOCAxMiIgd2lkdGg9IjE4cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8y%0D%0AMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0%0D%0AY2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUv%0D%0APjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFn%0D%0AZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAwMDAwMCIgaWQ9%0D%0AIkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04Ny4wMDAwMDAsIC0zNDIuMDAwMDAwKSI+PGcg%0D%0AaWQ9Im1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg3LjAwMDAwMCwgMzQyLjAwMDAwMCkiPjxw%0D%0AYXRoIGQ9Ik0wLDEyIEwxOCwxMiBMMTgsMTAgTDAsMTAgTDAsMTIgTDAsMTIgWiBNMCw3IEwxOCw3%0D%0AIEwxOCw1IEwwLDUgTDAsNyBMMCw3IFogTTAsMCBMMCwyIEwxOCwyIEwxOCwwIEwwLDAgTDAsMCBa%0D%0AIiBpZD0iU2hhcGUiLz48L2c+PC9nPjwvZz48L3N2Zz4=" class="menu__base">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQg%0D%0AU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3Zn%0D%0AMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0i%0D%0ANTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3%0D%0AaWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9y%0D%0AZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxw%0D%0AYXRoIGQ9Ik00OTcuOTEzLDQ5Ny45MTNjLTE4Ljc4MiwxOC43ODItNDkuMjI1LDE4Ljc4Mi02OC4w%0D%0AMDgsMGwtODQuODYyLTg0Ljg2M2MtMzQuODg5LDIyLjM4Mi03Ni4xMywzNS43MTctMTIwLjY1OSwz%0D%0ANS43MTcgIEMxMDAuNDY5LDQ0OC43NjcsMCwzNDguMzEyLDAsMjI0LjM4M1MxMDAuNDY5LDAsMjI0%0D%0ALjM4NCwwYzEyMy45MzEsMCwyMjQuMzg0LDEwMC40NTIsMjI0LjM4NCwyMjQuMzgzICBjMCw0NC41%0D%0AMTQtMTMuMzUyLDg1Ljc3MS0zNS43MTgsMTIwLjY3Nmw4NC44NjMsODQuODYzQzUxNi42OTUsNDQ4%0D%0ALjcwNCw1MTYuNjk1LDQ3OS4xMzEsNDk3LjkxMyw0OTcuOTEzeiBNMjI0LjM4NCw2NC4xMDkgIGMt%0D%0AODguNTExLDAtMTYwLjI3NCw3MS43NDctMTYwLjI3NCwxNjAuMjczYzAsODguNTI2LDcxLjc2NCwx%0D%0ANjAuMjc0LDE2MC4yNzQsMTYwLjI3NGM4OC41MjUsMCwxNjAuMjczLTcxLjc0OCwxNjAuMjczLTE2%0D%0AMC4yNzQgIEMzODQuNjU3LDEzNS44NTYsMzEyLjkwOSw2NC4xMDksMjI0LjM4NCw2NC4xMDl6Ii8+%0D%0APC9zdmc+" class="menu__base">
            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIw.........完整代码请登录后点击上方下载按钮下载查看

悬浮菜单弹出动画效果

网友评论0

div+css实现漂亮的垂直侧边栏可伸缩菜单效果代码

div+css实现底部横线菜单切换窗口效果代码

div+css实现横向鼠标悬停翻转文字导航菜单效果代码

react+use-web-animations实现横向和竖向图标菜单滑动效果代码

js+css实现滑动图标导航菜单效果代码

matter实现自由落体重力下落的导航菜单效果代码

div+css实现下拉菜单代码

div+css实现左侧悬浮伸缩菜单代码

div+Css实现手风琴二级菜单折叠效果代码

div+css实现二级下拉菜单导航效果代码