CSS 绘制任意角度扇形-渐变图像-示例接着上个文章的东西我们继续, 文章介绍了如何使用CSS实现旋转、对称的扇形以及绘

接着上个文章的东西我们继续, 查看原文章 CSS 绘制任意角度扇形-渐变图像(css) ;

实现旋转

大部分的逻辑在上个文章已经讲过了, 我来看一下这个的特殊地方

background-image: conic-gradient(
    $active-color 0, $active-color var(--rotate-deg, 0),
    $base-color var(--rotate-deg, 0), $base-color 100%
);

我们使用了 var() 函数, 用来代替非自定义属性中值的任何部分参考MDN
这样当我们修改 --rotate-deg, css 中的样式也会跟着变化;

实现对称的扇形

@mixin sector-deg(
    $deg: 0deg,
    $sector-size: 80px,
    $active-color: #4C84FF,
    $base-color: #EEEEEE
) {
    display: inline-block;
    width: $sector-size;
    height: $sector-size;
    border-radius: 50%;

    background-image: conic-gradient(
        from $deg / -2,
        $active-color 0, $active-color $deg,
        $base-color $deg, $base-color 100%
    );
}

@mixin 是 scss 的语法, 这里多解释了, 感兴趣的可以去文档查看
from $deg / -2 可以保证生成的扇形是对称显示的

实习多个等分的扇形

前几天在看文章的时候好像看到了实现上图的文章, 那么我们也来用我们的方式实现一下

@mixin colors ($colorList...) {
    $length: length($colorList);

    $space: 360deg / $length;
    $sector: 'from -90deg';
    @for $i from 1 through $length {
        $deg: $space * ($i - 1);
        $nextDeg: $space * $i;
        $color: nth($colorList, $i);
        // $sector: #{$sector}, #{$color} #{$deg}, #{$color} #{$nextDeg};
        $sector: #{$sector}, #{$color} #{$deg} #{$nextDeg};
    }

    background-image: conic-gradient($sector);
}

.color1 {
    @include colors(
        black, yellow,
        black, yellow,
        black, yellow,
    );
}

// 编译后的结果
.color1 {
    background-image: conic-gradient(
        from -90deg,
        black 0deg 60deg, yellow 60deg 120deg,
        black 120deg 180deg, yellow 180deg 240deg,
        black 240deg 300deg, yellow 300deg 360deg
    );
}

原理很简单, 因为考虑了可复用性所以看着会稍微复杂一些
虽然这样写会复杂很多, 但是建议在写代码时可以适当的考虑一下可复用性(但也不要过度设计呦)
$sector: #{$sector}, #{$color} #{$deg}, #{$color} #{$nextDeg}; 和 $sector: #{$sector}, #{$color} #{$deg} #{$nextDeg}; 两种方式浏览器都是支持的

小结

这个就是 渐变图像 一些扩展, 对此你还有什么想法吗?
如果有任何建议都可以联系我, 如果你感觉对你有帮助希望你可以点赞加关注
下期我们将使用 svg 去实现

CSS 绘制任意角度扇形-渐变图像-示例

实现旋转

实现对称的扇形

实习多个等分的扇形

小结

相关文档