旋转齿轮加载

效果演示

30-旋转齿轮加载.gif

实现了一个旋转齿轮的动画效果。具体来说，页面背景为深灰色，中间有一个齿轮装置，包括四个齿轮。每个齿轮都有内部的齿轮条，整体呈现出旋转的效果。其中，齿轮2是顺时针旋转的，齿轮1、3、4是逆时针旋转的。整体效果是四个齿轮交错旋转，形成一个动态的机械装置效果。

Code

<div class="gearbox">
    <div class="overlay"></div>
    <div class="gear one">
        <div class="gear-inner">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </div>
    <div class="gear two">
        <div class="gear-inner">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </div>
    <div class="gear three">
        <div class="gear-inner">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </div>
    <div class="gear four large">
        <div class="gear-inner">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </div>
</div>

body {
    height: 100vh; /* 设置body元素的高度为视口高度 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-color: #212121; /* 设置背景颜色为深灰色 */
}

@keyframes clockwise {
    0% {
        transform: rotate(0deg); /* 旋转角度从0度开始 */
    }
    100% {
        transform: rotate(360deg); /* 旋转角度到360度结束 */
    }
}

@keyframes counter-clockwise {
    0% {
        transform: rotate(0deg); /* 逆时针旋转角度从0度开始 */
    }
    100% {
        transform: rotate(-360deg); /* 逆时针旋转角度到-360度结束 */
    }
}

.gearbox {
    background: #111; /* 设置齿轮箱的背景颜色为深灰色 */
    height: 150px; /* 设置齿轮箱的高度 */
    width: 200px; /* 设置齿轮箱的宽度 */
    position: relative; /* 相对定位 */
    border: none; /* 去除边框 */
    overflow: hidden; /* 内容溢出隐藏 */
    border-radius: 6px; /* 设置圆角 */
    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1); /* 设置阴影效果 */
}

.gearbox .overlay {
    border-radius: 6px; /* 设置覆盖层的圆角 */
    content: ""; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    z-index: 10; /* 设置层级 */
    box-shadow: inset 0px 0px 20px black; /* 设置内阴影效果 */
    transition: background 0.2s; /* 背景颜色过渡效果 */
}

.gearbox .overlay {
    background: transparent; /* 设置覆盖层背景为透明 */
}

.gear {
    position: absolute; /* 绝对定位 */
    height: 60px; /* 设置齿轮的高度 */
    width: 60px; /* 设置齿轮的宽度 */
    box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black; /* 设置齿轮的阴影效果 */
    border-radius: 30px; /* 设置齿轮的圆角 */
}

.gear.large {
    height: 120px; /* 设置大齿轮的高度 */
    width: 120px; /* 设置大齿轮的宽度 */
    border-radius: 60px; /* 设置大齿轮的圆角 */
}

.gear.large:after {
    height: 96px; /* 设置大齿轮内部圆的高度 */
    width: 96px; /* 设置大齿轮内部圆的宽度 */
    border-radius: 48px; /* 设置大齿轮内部圆的圆角 */
    margin-left: -48px; /* 左偏移 */
    margin-top: -48px; /* 上偏移 */
}

.gear.one {
    top: 12px; /* 位置调整 */
    left: 10px; /* 位置调整 */
}

.gear.two {
    top: 61px; /* 位置调整 */
    left: 60px; /* 位置调整 */
}

.gear.three {
    top: 110px; /* 位置调整 */
    left: 10px; /* 位置调整 */
}

.gear.four {
    top: 13px; /* 位置调整 */
    left: 128px; /* 位置调整 */
}

.gear:after {
    content: ""; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    height: 36px; /* 设置齿轮内部圆的高度 */
    width: 36px; /* 设置齿轮内部圆的宽度 */
    border-radius: 36px; /* 设置齿轮内部圆的圆角 */
    background: #111; /* 设置齿轮内部圆的背景颜色 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    margin-left: -18px; /* 左偏移 */
    margin-top: -18px; /* 上偏移 */
    z-index: 3; /* 设置层级 */
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #090909, inset 0px -1px 0px 0px #888888; /* 设置阴影效果 */
}

.gear-inner {
    position: relative; /* 相对定位 */
    height: 100%; /* 设置齿轮内部的高度 */
    width: 100%; /* 设置齿轮内部的宽度 */
    background: #555; /* 设置齿轮内部的背景颜色 */
    border-radius: 30px; /* 设置齿轮内部的圆角 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 设置边框 */
}

.large .gear-inner {
    border-radius: 60px; /* 设置大齿轮内部的圆角 */
}

.gear.one .gear-inner {
    animation: counter-clockwise 3s infinite linear; /* 设置逆时针旋转动画 */
}

.gear.two .gear-inner {
    animation: clockwise 3s infinite linear; /* 设置顺时针旋转动画 */
}

.gear.three .gear-inner {
    animation: counter-clockwise 3s infinite linear; /* 设置逆时针旋转动画 */
}

.gear.four .gear-inner {
    animation: counter-clockwise 6s infinite linear; /* 设置逆时针旋转动画 */
}

.gear-inner .bar {
    background: #555; /* 设置齿轮内部条的背景颜色 */
    height: 16px; /* 设置齿轮内部条的高度 */
    width: 76px; /* 设置齿轮内部条的宽度 */
    position: absolute; /* 绝对定位 */
    left: 50%; /* 水平居中 */
    margin-left: -38px; /* 左偏移 */
    top: 50%; /* 垂直居中 */
    margin-top: -8px; /* 上偏移 */
    border-radius: 2px; /* 设置齿轮内部条的圆角 */
    border-left: 1px solid rgba(255, 255, 255, 0.1); /* 设置左边框 */
    border-right: 1px solid rgba(255, 255, 255, 0.1); /* 设置右边框 */
}

.large .gear-inner .bar {
    margin-left: -68px; /* 左偏移 */
    width: 136px; /* 设置大齿轮内部条的宽度 */
}

.gear-inner .bar:nth-child(2) {
    transform: rotate(60deg); /* 旋转角度为60度 */
}

.gear-inner .bar:nth-child(3) {
    transform: rotate(120deg); /* 旋转角度为120度 */
}

.gear-inner .bar:nth-child(4) {
    transform: rotate(90deg); /* 旋转角度为90度 */
}

.gear-inner .bar:nth-child(5) {
    transform: rotate(30deg); /* 旋转角度为30度 */
}

.gear-inner .bar:nth-child(6) {
    transform: rotate(150deg); /* 旋转角度为150度 */
}