jQuery四叶草菜单效果，跟360杀毒软件差不多

首先，我们要在js,css文件夹中创建js跟css，然后在body中写入html代码

<main><!--标签是 HTML 5 中的新标签。 素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单-->
        <div class="one">医疗</div>
        <div class="two">饮食</div>
        <div class="three">运动</div>
        <div class="four">消费</div>
    </main>

然后我们在css中写入它们的样式

 * {
            margin: 0 auto;
            padding: 0;
        }

        body,
        html {
            height: 100%;
            display: flex;/*弹性盒子  Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。*/
            justify-content: center;/*用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。*/
            align-items: center;/*属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。*/
            /* 定义背景颜色的过度和延迟 */
            transition: 0.5s;
            transition-delay: 0.3s;
        }
        body{background-color: #292929}
        main {
            width: 400px;
            height: 400px;
            /* border: 1px solid black; */
            position: relative;
        }

        div {
            /* 设置4个小叶片的整体样式 */
            width: 150px;
            height: 150px;
            /* 设置绝对定位，相对于他的父元素 main */
            position: absolute;
            box-sizing: border-box;
            transition: 0.5s;
            background: rgba(0, 0, 0, 0.493);
            text-align: center;
            line-height: 150px;
            color: rgba(255, 255, 255, 0.849);
            font-size: 35px;
            /* 设置小手样式 */
            cursor: pointer;
        }

        .one:hover,
        .two:hover {
            /* 当鼠标经过 医疗 饮食时，出现阴影，并往上移动10px */
            box-shadow: 0 0 10px rgb(102, 98, 98);
            transform: translateY(-10px);
        }

        .three:hover,
        .four:hover {
            /* 当鼠标经过 运动 消费时，出现阴影，并往下移动10px */
            box-shadow: 0 0 10px rgb(102, 98, 98);
            transform: translateY(10px);
        }

        .one {
            /* 初始样式 */
            /* 给医疗小叶片定位 */
            left: 45px;
            top: 45px;
            /* 设置右上角和左下角样式 */
            border-top-right-radius: 50%;
            border-bottom-left-radius: 50%;
            background: rgba(238, 10, 10, 0.644);
        }

        .ones {
            /* 点击要调用的样式 */
            left: 0px;
            top: 0px;
            text-shadow: 5px 5px 5px rgb(56, 55, 55);
            background: rgba(238, 10, 10, 0.986);
        }

        .two {
            /* 初始样式 */
            /* 给饮食小叶片定位 */
            right: 45px;
            top: 45px;
            /* 设置左上角和右下角样式 */
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            background: rgba(252, 235, 3, 0.863);
        }

        .twos {
            /* 点击要调用的样式 */
            right: 0px;
            top: 0px;
            text-shadow: -5px 5px 5px rgb(56, 55, 55);
            background: rgba(252, 235, 3, 0.863);
        }

        .three {
            /* 初始样式 */
            /* 给运动小叶片定位 */
            left: 45px;
            bottom: 45px;
            /* 设置左上角和右下角样式 */
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            background: rgba(149, 247, 3, 0.877);
        }

        .threes {
            /* 点击要调用的样式 */
            left: 0;
            bottom: 0;
            text-shadow: 5px -5px 5px rgb(56, 55, 55);
            background: rgba(149, 247, 3, 0.877);
        }

        .four {
            /* 初始样式 */
            /* 给消费小叶片定位 */
            bottom: 45px;
            right: 45px;
            /* 设置右上角和左下角样式 */
            border-top-right-radius: 50%;
            border-bottom-left-radius: 50%;
            background: rgba(5, 190, 247, 0.856);
        }

        .fours {
            /* 点击要调用的样式 */
            bottom: 0;
            right: 0;
            text-shadow: -5px -5px 5px rgb(56, 55, 55);
            background: rgba(5, 190, 247, 0.856);
        }

        .ones,
        .twos,
        .threes,
        .fours {
            /* 设置被调用的公共样式 */
            border: 3px solid white;
            color: white;
            border-radius: 80%;

最后就是我们使用JQ写四叶草菜单的动态样式

 // 当点击医疗时调用方法
        $('.one').click(function () {
            // 判断语句
            // 如果当前样式为  .one时
            if ($(this).attr('class') == 'one') {
                // 则点击时调用的为 .ones 样式
                $(this).attr('class', 'ones')
                //    背景颜色改变
                $('body').css({ background: 'rgba(247, 114, 114, 0.986)' })
            } else {//否则，也就是说当前为 .ones样式时，点击调用的是 .one样式

                //这样可以实现重复点击效果
                $(this).attr('class', 'one')
                //使背景颜色变白
                $('body').css({ background: 'none' })
            }
        })

        // 当点击饮食时调用方法
        //道理同上
        $('.two').click(function () {
            if ($(this).attr('class') == 'two') {
                $(this).attr('class', 'twos')
                $('body').css({ background: 'rgb(245, 245, 129)' })
            } else {
                $(this).attr('class', 'two')
                $('body').css({ background: 'none' })
            }
        })

        // 当点击运动时调用方法
        //道理同上
        $('.three').click(function () {
            if ($(this).attr('class') == 'three') {
                $(this).attr('class', 'threes')
                $('body').css({ background: 'rgb(193, 245, 115)' })
            } else {
                $(this).attr('class', 'three')
                $('body').css({ background: 'none' })
            }
        })

        // 当点击消费时调用方法
        //道理同上
        $('.four').click(function () {
            if ($(this).attr('class') == 'four') {
                $(this).attr('class', 'fours')
                $('body').css({ background: 'rgb(133, 219, 245)' })
            } else {
                $(this).attr('class', 'four')
                $('body').css({ background: 'none' })
            }
        })

别忘了JQ插件喔！！