用css实现一个硬币旋转的效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>银币旋转效果</title>
        <style>
            #euro {
                width: 150px;
                height: 150px;
                margin-left: -75px;
                margin-top: -75px;
                position: absolute;
                background: red;
                border-radius: 50%;
                top: 50%;
                left: 50%;
                transform-style: preserve-3d;
                animation: spin 2.5s linear infinite;
            }
            .back {
                background-image: url("/uploads/160101/backeuro.png");
                width: 150px;
                height: 150px;
                background: blue;
                border-radius: 50%;
            }
            .middle {
                background-image: url("/uploads/160101/faceeuro.png");
                width: 150px;
                height: 150px;
                transform: translateZ(1px);
                position: absolute;
                background: yellow;
                border-radius: 50%;
                top: 0;
            }
            .front {
                background-image: url("/uploads/160101/faceeuro.png");
                height: 150px;
                position: absolute;
                top: 0;
                transform: translateZ(10px);
                width: 150px;
            }

            @keyframes spin {
                0% {
                    transform: rotateY(0deg);
                }
                100% {
                    transform: rotateY(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div id="euro">
            <div class="front" />
            <div class="middle" />
            <div class="back" />
        </div>
    </body>
</html>
效果如下：
posted @ 2021-11-14 19:36 艺术诗人阅读(727) 评论(0) 编辑收藏举报
刷新页面返回顶部
用css实现一个硬币旋转的效果

公告
