使用css3制作一个摆锤

王铁柱666

于 2024-12-31 08:07:54 发布

阅读量313

点赞数 5

CC 4.0 BY-SA版权

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/2401_87873725/article/details/144839020

要制作一个摆锤动画，我们可以使用CSS3的@keyframes和animation属性。以下是一个简单的示例，其中摆锤会左右摆动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摆锤动画</title>
    <style>
        .pendulum {
            position: relative;
            height: 200px;
            width: 2px;
            background-color: black;
            margin: 100px auto;
            transform-origin: top center;
            animation: swing 2s infinite alternate;
        }

        @keyframes swing {
            0% {
                transform: rotate(10deg);
            }
            100% {
                transform: rotate(-10deg);
            }
        }
    </style>
</head>
<body>
    <div class="pendulum"></div>
</body>
</html>

在这个示例中，.pendulum类定义了一个摆锤，它使用CSS动画来模拟摆动效果。@keyframes swing定义了摆锤的摆动动画，从10度旋转到-10度，然后再次旋转回10度，如此往复。animation属性将这个动画应用到摆锤元素上，并设置动画持续时间为2秒，无限循环，并在每次迭代后交替方向。

请注意，这只是一个非常简单的示例，你可以根据需要调整摆锤的样式和动画效果。例如，你可以更改摆锤的颜色、形状或大小，或者调整摆动的角度和速度等。

另外，如果你想要更复杂的摆锤效果，例如模拟真实的物理摆动效果，你可能需要使用JavaScript或更高级的动画库来实现。