CSS实现--摩天轮（简易）

怼烎@ 2022-12-08 14:17 124阅读 0赞

写这个需要搞清楚 相对定位和绝对定位 搞清楚这个就可以完成这个了

先上效果图吧

![20200919203052598.gif][]

代码如下

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background-color: tomato;
            }
            .view{
                margin:0 auto;
            }
            .bg{
                width: 768px;
                height: 768px;
                background-image: url("images/fsw.png");
                position: relative;
                margin: 100px auto;
    
                animation: zhuan1 10s infinite linear;
            }
            .img1{
                position: absolute;
                top: 57px;
                left: 70px;
            }
            .img2{
                position: absolute;
                top: 520px;
                left: 570px;
            }
            .img3{
                position: absolute;
                top: 57px;
                left: 570px;
            }
            .img4{
                position: absolute;
                top: 520px;
                left: 70px;
            }
            .img5{
                position: absolute;
                top: 280px;
                left: -30px;
            }
            .img6{
                position: absolute;
                top: 280px;
                left: 650px;
            }
            .img7{
                position: absolute;
                top: -20px;
                left: 316px;
            }
            .img8{
                position: absolute;
                top: 610px;
                left: 316px;
            }
            
            .title{
                position: absolute;
                top: 361px;
                left: 712px;
                width: 500px;
            }
            @keyframes zhuan1{
                to{
                    transform: rotate(360deg);
                }
            }
    
            .bg img{
                animation: zhuan2 10s infinite linear;
            }
            @keyframes zhuan2{
                to{
                    transform: rotate(-360deg);
                }
            }
    
    
    
        </style>
    </head>
    <body>
        <div class="view">
            <div class="bg">
                <img class="img1" src="./images/dog.png" alt="">
                <img class="img2" src="./images/boy.png" alt="">
                <img class="img3" src="./images/girl.png" alt="">
                <img class="img4" src="./images/girls.png" alt="">
                <img class="img5" src="./images/hairboy.png" alt="">
                <img class="img6" src="./images/mimi.png" alt="">
                <img class="img7" src="./images/mudog.png" alt="">
                <img class="img8" src="./images/shamegirl.png" alt="">
            </div>
            <img src="./images/big-title.png" alt="" class="title">
        </div>
    </body>
    </html>

两点需要注意：

1.背景大转轮 就是 bg里面的图片转动为顺时针旋转，里面每个小图片旋转为顺势针，这样就刚刚好了，如果都是同一方向旋转就成了这样的效果

![20200919203535355.gif][]

2.每个小图都是相对于外面的大转轮做了绝对定位，给大转轮添加了相对定位，然后根据浏览器属性慢慢的去调节他们之间的位置就可以了

[20200919203052598.gif]: /images/20221123/304cabce62aa4e2e90dfdfc6f0ebcd40.png
[20200919203535355.gif]: /images/20221123/87cb6c3c64dd420f80bbcd365bb63bdf.png