其他分享
首页 > 其他分享> > 搭配色轮播（CSS进阶版本）

搭配色轮播（CSS进阶版本）

作者：互联网

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color</title>
    <style>
        /* 自定义颜色 */
        /* :root { */
            /* --topColor: #002e9b; */
            /* --bottomColor: #F5DF4D; */
        /* } */

        .bg {
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(var(--topColor) 0%, var(--topColor) 50%, var(--bottomColor) 50%, var(--bottomColor) 100%);
        }

        .circle {
            width: 395px;
            height: 395px;
            border-radius: 50%;
            box-shadow: 8px 8px 10px 0 #000;
            -webkit-text-stroke: 0.3px #002e9b;
            font-size: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .left {
            position: absolute;
            top: calc(50% - 197.5px);
            left: calc(30% - 197.5px);
            background-color: var(--topColor);
            color: var(--bottomColor);
        }

        .right {
            position: absolute;
            top: calc(50% - 197.5px);
            right: calc(30% - 197.5px);
            background-color: var(--bottomColor);
            color: var(--topColor);
        }

        @media screen and (max-width: 1000px) {
            .bg {
                background-image: linear-gradient(to left, var(--topColor) 0%, var(--topColor) 50%, var(--bottomColor) 50%, var(--bottomColor) 100%);
            }

            .left {
                left: calc(50% - 100px);
                top: calc(30% - 100px);
            }

            .right {
                right: calc(50% - 100px);
                top: calc(75% - 100px);
            }

            .circle {
                width: 200px;
                height: 200px;
                font-size: 20px;
            }
        }
    </style>
</head>

<body>
    <div class="bg" onclick="changeColor()">
        <div class="left circle" id="left"></div>
        <div class="right circle" id="right"></div>
    </div>
</body>
<script>
    var color = [
        {
            topName: "克莱因蓝",
            topColor: "#002e9b",
            bottomName: "靓丽黄",
            bottomColor: "#F5DF4D"
        },
        {
            topName: "爱马仕橙",
            topColor: "#ff770f",
            bottomName: "浅灰",
            bottomColor: "#c1c1c1"
        },
        {
            topName: "中国红",
            topColor: "#d7000f",
            bottomName: "扶光",
            bottomColor: "#f0c2a2"
        },
        {
            topName: "栀子黄",
            topColor: "#fac03d",
            bottomName: "苔绿色",
            bottomColor: "#697723"
        },
        {
            topName: "淡酒红",
            topColor: "#a27e7e",
            bottomName: "淡黄色",
            bottomColor: "#faead3"
        },
        {
            topName: "中绿",
            topColor: "#96a48b",
            bottomName: "低饱和黄",
            bottomColor: "#d8caaf"
        }, {
            topName: "蓝莓",
            topColor: "#3e3f4c",
            bottomName: "珊瑚粉红",
            bottomColor: "#be98aa"
        }, {
            topName: "烈淡紫",
            topColor: "#4d3a59",
            bottomName: "灰白",
            bottomColor: "#e1dad9"
        }, {
            topName: "克莱因蓝",
            topColor: "#002fa7",
            bottomName: "雾灰",
            bottomColor: "#c8c7c5"
        }, {
            topName: "勃艮第红",
            topColor: "#800020",
            bottomName: "米白",
            bottomColor: "#dcd2c6"
        }, {
            topName: "海蓝",
            topColor: "#467879",
            bottomName: "浅土色",
            bottomColor: "#e7cd79"
        }, {
            topName: "闪光绿",
            topColor: "#dbe196",
            bottomName: "鸢尾科",
            bottomColor: "#c8c7c5"
        }, {
            topName: "米色",
            topColor: "#dbccd1",
            bottomName: "叶绿色",
            bottomColor: "#94aa67"
        }, {
            topName: "脏橘",
            topColor: "#c99e8c",
            bottomName: "冷蓝",
            bottomColor: "#465e65"
        }, {
            topName: "青绿灰",
            topColor: "#98a594",
            bottomName: "兰花色",
            bottomColor: "#c8c7c5"
        }
    ];
    var index = -1;
    //切换颜色
    function changeColor() {
        if (index < color.length - 1) {
            index++;
        } else {
            index = 0;
        }

        var root = document.querySelector(":root");
        var left = document.getElementById("left");
        var right = document.getElementById("right");

        root.style.setProperty("--topColor", color[index].topColor);
        root.style.setProperty("--bottomColor", color[index].bottomColor);

        left.innerText = color[index].topName + color[index].topColor;

        right.innerText = color[index].bottomName + color[index].bottomColor;


    }
    //每5秒触发切换颜色的方法
    function forever() {
        changeColor();
        setTimeout(forever, 5000);
    }
    forever();//记得主动调用时间方法
</script>

</html>

 

标签：轮播,topName,--,bottomName,topColor,var,bottomColor,CSS,进阶
来源： https://www.cnblogs.com/linlinmailbox/p/16486067.html