css动画实现摩天轮效果

1、知识准备

在完成这个摩天轮之前要先搞清楚定位，相对定位和绝对定位的用法，显示层级的设置

下面是InsCode运行的结果

2、html结构

整体就是一个大盒子，添加游乐园的背景图，然后创建摩天轮的盒子，添加摩天轮背景图，在摩天轮上还有几个座舱，是摩天轮的子元素，整体结构如下：

<div class="big">
        <!--摩天轮小图-->
        <div class="small">
            <img src="./images/1.png" alt="" />
            <img src="./images/2.png" alt="" />
            <img src="./images/3.png" alt="" />
        </div>
    </div>

2、css样式

利用相对定位使摩天轮位置移动到合适地方，然后给每个座舱img设置绝对定位使得图片固定在摩天轮盒子的合适位置，如图

3、动画效果

设置完位置之后，就要实现摩天轮和座舱动起来的效果，使用动画实现。首先摩天轮应该是围绕自己的中心，以此为原点，z轴旋转360度且一直匀速循环。

animation: few 10s linear infinite;

 @keyframes few {

            0% {

                transform: rotate(0deg);

            }

            100% {

                transform: rotate(360deg);

            }

        }

那这个时候我们就要考虑只给摩天轮添加动画效果之后每个座舱会变成什么样，座舱会本身固定不动，定位使得它们随着摩天轮转动，还需要给每个座舱设置动画让它们自身旋转，同理自己中心为原点，绕z轴转动。

 animation: smalls 10s linear infinite;

 @keyframes smalls {

            0% {

                transform: rotate(0deg);

            }

            100% {

                transform: rotate(-360deg);

            }

        }

两个动画执行时间要保持相同并注意旋转方向。

代码如下：

 .big {
            width: 1547px;
            height: 1000px;
            background: url(./images/bg.png) no-repeat;
        }

        .small {
            width: 770px;
            height: 770px;
            position: relative;
            left: 300px;
            top: 200px;
            background: url(./images/fw.png) no-repeat;
            animation: few 10s linear infinite;
        }

        .small img {
            position: absolute;
            animation: smalls 10s linear infinite;
        }

        .small img:nth-child(1) {
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        .small img:nth-child(2) {
            bottom: 0;
            right: 0;
            top: 0;
            margin: auto;
        }

        .small img:nth-child(3) {
            bottom: 0;
            left: 0;
            top: 0;
            margin: auto;
        }

        @keyframes few {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes smalls {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(-360deg);
            }
        }