js实现弧形曲线循环菜单效果代码-html代码-BFW代码库

js实现弧形曲线循环菜单效果代码

代码语言：html

代码描述：js实现弧形曲线循环菜单效果代码

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

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

    <style>
        body {
            background-color: #4682b4;
        }

        a:hover,
        a {
            color: inherit;
            text-decoration: inherit;
        }

        .c-menu {
            position: relative;
            height: 440px;
            width: 800px;
            overflow: hidden;
            margin-left: 50px;
            margin-top: 50px;
        }

        .top, .bottom {
            position: absolute;
            left: 0;
            width: 100%;
            height: 50px;
            background: transparent;
        }

        .top {
            top: 0;
            background: linear-gradient(tobottom, steelblue 0%, rgba(70, 130, 180, 0) 100%);
        }

        .bottom {
            bottom: 0;
            background: linear-gradient(tobottom, rgba(70, 130, 180, 0) 0%, steelblue 100%);
        }

        .img-box, .hide {
            position: absolute;
            left: 7px;
            top: 177px;
            width: 111px;
            height: 82px;
            opacity: 1;
            transition: opacity, 2s;
        }

        .hide {
            opacity: 0;
            transition: opacity, .5s;
        }

        .items-list {
            position: absolute;
            left: -400px;
            top: -101px;
            width: 500px;
            height: 498px;
            border: 2px solid #a2c0d9;
            border-radius: 50%;
            margin: 70px;
        }

        .item {
            position: absolute;
            width: 600px;
            padding-left: 25px;
            font-size: 18px;
            transition: font-size 1s;
            text-align: left;
            cursor: pointer;
        }
        .item:nth-child(7) {
            font-size: 28px;
            margin-top: -4px;
            transition: font-size .5s;
        }
        .item:before {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #dae6ef;
            border-radius: 50%;
            left: 5px;
            top: 4px;
        }
        .item:nth-child(7):before {
            top: 10px;
        }
        .item a {
            col.........完整代码请登录后点击上方下载按钮下载查看