【好看的CSS动画分享】悬浮球菜单CSS

前言

代码虽然是基于vue框架+vant UI的icon组件开发的，实际都可把icon直接替换成图片、直接在html页面内研发（不去基于任何框架），总体没有什么技术含量，只是想自己开发着玩儿的

另外这里只列举了6个子菜单的情况，然后每个字菜单出来的位置是通过“勾股定理+等边三角形”算的，如果大家设计4个、5个、7个、8个的可自行大致算下位置

效果展示

效果图

效果动图

全部代码（重点是CSS部分）

1、HTML部分

<template>
    <div class="menus" :class="{'menus_checked': checked}">
    	<!-- 主菜单按钮 -->
        <span class="menu menu_main" @click="checked = !checked">
            <van-icon :name=" checked ? 'cross' : 'wap-nav' "/>
        </span>
        
         <!-- 子菜单按钮 -->
        <template v-for="(menu, index) in menus" :key="index">
            <a 
                href="javascript:;"
                :style="{'--color': menu.color}"
                :class="['menu menu_a', `menu_a--${index + 1}`]"
            >
                <van-icon :name="menu.icon" />
            </a>
        </template>
    </div>
</template>

2、JS部分

<script>
    export default {
        name: "suspend-menu",
        data() {
            return {
                checked: false,//主菜单按钮是否被选中
                menus: [
                    { icon: "cart", color: "#669AE1" },
                    { icon: "point-gift", color: "#70CC72" },
                    { icon: "gem", color: "#FE4365" },
                    { icon: "service", color: "#C49CDE" },
                    { icon: "medal", color: "#FC913A" },
                    { icon: "photograph", color: "#62C2E4" }
                ]
            }
        }
    }
</script>

3、CSS部分

<style scoped>

.menus {
    width: 80px;
    height: 80px;
    line-height: 80px;
    position: relative;
    font-size: 24px;
    color: #ffffff;
    margin: auto;
}

.menus .menu {
    display: block;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition-timing-function: cubic-bezier(0.25, 1.2, 0.45, 1.1);
    transition-duration: 1s;
}

.menus .menu_main {
    z-index: 2;
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 36px;
    background-color: #607D88;
    box-shadow: 0 0 10px #607D88;
}

.menus .menu_a {
    width: 60px;
    height: 60px;
    line-height: 60px;
    color: inherit;
    background-color: var(--color);
    box-shadow: 0 0 6px var(--color);
    transform: translate(-50%, -50%) rotate(180deg);
}

/* 点击悬浮球主菜单按钮后样式 */
.menus_checked .menu_main {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 28px;
    color: #607D88;
    background-color: #ffffff;
}
.menus_checked > .menu_a--1 {
    transform: translate(-50%, calc(-50% - 80px));
}

.menus_checked > .menu_a--2 {
    transform: translate(calc(-50% - 80px), calc(-50% - 40px));
}

.menus_checked > .menu_a--3 {
    transform: translate(calc(-50% - 80px), calc(-50% + 40px));
}

.menus_checked > .menu_a--4 {
    transform: translate(-50%, calc(-50% + 80px));
}

.menus_checked > .menu_a--5 {
    transform: translate(calc(-50% + 80px), calc(-50% + 40px));
}

.menus_checked > .menu_a--6 {
    transform: translate(calc(-50% + 80px), calc(-50% - 40px));
}

.menu_a:hover {
    color: var(--color);
    background-color: #ffffff;
    font-size: 32px;
}
</style>