使用css3制作一个摆锤

要使用CSS3制作一个摆锤效果，你可以利用@keyframes动画。以下是一个简单的示例，展示如何创建一个摆锤动画：

  1. HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摆锤动画</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="pendulum"></div>
</body>
</html>
  1. CSS样式和动画 (styles.css)：
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.pendulum {
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 50%;
    position: relative;
    animation: swing 2s infinite alternate;
    transform-origin: top center;
}

@keyframes swing {
    0% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(10deg);
    }
}

在这个示例中，.pendulum类代表摆锤。我们使用了@keyframes来定义摆锤的摆动动画。动画的名字是swing，它会在2秒内无限次地重复，并且每次迭代都会交替方向（由于alternate属性）。摆锤会在10度到-10度之间摆动。

你可以根据需要调整摆锤的大小、颜色、摆动角度和动画速度等属性。

posted @ 2024-12-28 09:37  王铁柱6  阅读(20)  评论(0)    收藏  举报