conic-gradient 角向渐变

最新推荐文章于 2024-07-30 10:44:02 发布

⁡⁢⁡⁢⁠Ac

最新推荐文章于 2024-07-30 10:44:02 发布

阅读量264

点赞数 3

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_53261137/article/details/129743883

版权

本文介绍了如何使用CSS的conic-gradient属性创建角向渐变，包括如何配合百分比、背景尺寸使用，以及如何实现重复角向渐变。同时提供了一个实际项目中的应用示例，展示了复杂背景效果的创建方法。

摘要由CSDN通过智能技术生成

开始使用 conic-gradient 角向渐变

使用 conic-gradient 实现颜色表盘

#test1 {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: conic-gradient(red, orange, yellow, green, teal, blue, purple);
    }

在这里插入图片描述

配合百分比使用

 #test2 {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: conic-gradient(deeppink 0 30%, yellowgreen 30% 70%, teal 70% 100%)
    }

在这里插入图片描述

配合 background-size 使用

 #test3 {
        width: 250px;
        height: 250px;
        /* margin: 50px auto; */
        background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);
        border: 5px solid #000;
        background-size: 50px 50px;
    }

在这里插入图片描述

重复角向渐变 repeating-conic-gradient

 #test4 {
        width: 200px;
        height: 200px;
        background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);
        border: 1px solid #000;
    }

在这里插入图片描述

在项目中使用 conic-gradient

.bg {
        position: relative;
        margin: 50px auto;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: conic-gradient(#f1462c 0%, #fc5d2c 12.4%, #fff 12.5%, #fff 12.5%, #fc5d2c 12.5%, #fba73e 24.9%, #fff 24.9%, #fff 25%, #fba73e 25%, #e0fa4e 37.4%, #fff 37.4%, #fff 37.5%, #e0fa4e 37.5%, #12dd7e 49.9%, #fff 49.9%, #fff 50%, #12dd7e 50%, #0a6e3f 62.4%, #fff 62.4%, #fff 62.5%);
        transform: rotate(-112.5deg);
        transform-origin: 50% 50%;
    }

    .bg::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 370px;
        height: 370px;
        border-radius: 50%;
        background: #fff;
    }

    .bg::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background:
            radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),
            conic-gradient(#f1462c 0 12.5%, #fba73e 0 25%, #e0fa4e 0 37.5%, #12dd7e 0 50%, #0a6e3f 0 62.5%, #fff 0 100%);

    }

    .point {
        position: absolute;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        background: radial-gradient(#467dc6 0%, #a4c6f3 100%);
        border-radius: 50%;
        z-index: 999;
    }

    .point::before {
        content: "";
        position: absolute;
        width: 5px;
        height: 350px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(0);
        border-radius: 100% 100% 5% 5%;
        background: linear-gradient(180deg,
                #9bc7f6 0,
                #467dc6 50%,
                transparent 50%,
                transparent 100%);
        animation: rotate 3s cubic-bezier(.93, 1.32, .89, 1.15) infinite;
    }

    @keyframes rotate {
        50% {
            transform: translate(-50%, -50%) rotate(150deg);
        }

        100% {
            transform: translate(-50%, -50%) rotate(150deg);
        }
    }