css实现数字圆球曲线扇形排列动画效果代码-html代码-BFW代码库

css实现数字圆球曲线扇形排列动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现数字圆球曲线扇形排列动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
<style>
body {
    background: #111111;
}

.rotating-thing {
    --size: 90vmin;
    --carousel-radius: calc(.5 * var(--size));
    --item-radius: calc(.2 * var(--carousel-radius));
    --pi: 3.1416;
    --n: 12;
    --delta: 0;

    height: var(--size);
    width: var(--size);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-clip-path: polygon(100% 0, 100% 30%, 50% 50%, 0 30%, 0 0);
            clip-path: polygon(100% 0, 100% 30%, 50% 50%, 0 30%, 0 0);

    > .item {
        --index: 1;
        --angle: calc(var(--delta) + 2 * var(--pi) * var(--index) / var(--n));

        height: calc(2 * var(--item-radius));
        width: calc(2 * var(--item-radius));
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform:
            translateX(calc(-50% + (var(--carousel-radius) - var(--item-radius)) * cos(var(--angle))))
            translateY(calc(-50% + (var(--carousel-radius) - var(--item-radius)) * sin(var(--angle))))
            rotate(calc(90deg + 180deg * var(--angle) / var(--pi)));
        border-radius: 50%;
        background: #333333;
        color: #eeeeee;
        font-family:
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            'Segoe UI',
            'Roboto',
            'Oxygen',
            'Ubuntu',
            'Cantarell',
            'Open Sans',
            'Helvetica Ne.........完整代码请登录后点击上方下载按钮下载查看