HTML&CSS：惊爆！齿轮动画，为你的网页添动力

前端Hardy
299 阅读3分钟

这段代码创建了一个包含四个齿轮的动画效果，每个齿轮以不同的速度和方向旋转，模拟了一个机械齿轮组的运作。

演示效果

HTML&CSS

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        @keyframes clockwise {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
        @keyframes counter-clockwise {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(-360deg);
            }
        }
        .gearbox {
            height: 300px;
            width: 400px;
            position: relative;
            border: none;
            overflow: hidden;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .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: #e8e8e8;
            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);
        }
        .gear-inner .bar:nth-child(3) {
            transform: rotate(120deg);
        }
        .gear-inner .bar:nth-child(4) {
            transform: rotate(90deg);
        }
        .gear-inner .bar:nth-child(5) {
            transform: rotate(30deg);
        }
        .gear-inner .bar:nth-child(6) {
            transform: rotate(150deg);
        }
    </style>
</head>
<body>
    <div class="gearbox">
        <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>

</html>

HTML 结构

  • gearbox: 创建一个类名为“gearbox”的 div 元素，用于包含所有的齿轮。

CSS 样式

  • body: 设置页面的边距、填充、背景色、显示方式和高度。
  • @keyframes clockwise 和 @keyframes counter-clockwise: 定义了两个关键帧动画，分别用于顺时针和逆时针旋转。
  • .gearbox: 设置齿轮箱的样式，包括尺寸、位置、溢出、边框半径和显示方式。
  • .gear: 设置齿轮的基本样式，包括尺寸、阴影和边框半径。
  • .gear.large: 设置大齿轮的尺寸和边框半径。
  • .gear.large:after: 设置大齿轮中心孔的尺寸和位置。
  • .gear.one, .gear.two, .gear.three, .gear.four: 设置每个齿轮的位置。
  • .gear:after: 设置齿轮中心孔的样式。
  • .gear-inner: 设置齿轮内部的样式，包括尺寸、背景色和边框半径。
  • .gear-inner .bar: 设置齿轮内部条的样式，包括背景色、尺寸、位置和边框半径。
  • .gear-inner .bar:nth-child(n): 设置不同条的旋转角度。
avatar
文章
阅读
粉丝