手写一个使用css3旋转硬币的效果

当然，以下是一个简单的示例，展示了如何使用CSS3来创建一个旋转硬币的效果。这个示例中，我们将使用HTML和CSS来创建一个硬币，并使用CSS动画来使其旋转。

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="coin"></div>
</body>
</html>

CSS (styles.css):

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.coin {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: gold;
    border: 5px solid #8b4513;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

在这个示例中，我们首先创建了一个HTML文件，其中包含一个div元素，该元素将表示我们的硬币。然后，在CSS文件中，我们为body元素设置了一些样式，以使其居中显示，并设置了背景颜色。

接下来，我们为.coin类定义了一些样式。我们设置了硬币的宽度和高度，使用了border-radius: 50%来使其呈现圆形。然后，我们设置了背景颜色为金色，边框颜色为深棕色，并添加了一些阴影效果来增强立体感。

最后，我们使用@keyframes规则定义了一个名为spin的动画。这个动画将在0%时开始，此时硬币的旋转角度为0度；在100%时结束，此时硬币的旋转角度为360度。这意味着硬币将完成一整圈的旋转。然后，我们将这个动画应用到了.coin类上，并设置了动画的持续时间为2秒，动画的速度曲线为线性（即匀速旋转），并且动画将无限次重复。

posted @ 2025-01-20 14:45  王铁柱6  阅读(52)  评论(0)    收藏  举报