Using CSS and Html animation to realize the moving Ferris wheel

The rendering of the Ferris wheel is as follows:

The html layout is as follows

The css style is as follows:

* {
  margin: 0;
 padding: 0;
}

body,
html {
    height: 100%;
}

body {
    background: url(images/2.jpg) no-repeat;
    background-size: 100% 100%;
}

img {
    display: block;
}

.box {
    width: 768px;
    height: 768px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: url(images/bracket.png) no-repeat center 384px;
}

.fsw {
    animation: roll 15s linear infinite;
}

.imgCon {
    width: 768px;
    height: 768px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    animation: roll 15s linear infinite;
}

.imgCon img {
    position: absolute;
    transform-origin: center top;
    animation: roll1 15s linear infinite;
}

.img1 {
    left: 325px;
    top: 30px;
}

.img2 {
    left: -30px;
    top: 350px;
}

.img3 {
    left: 325px;
    bottom: -150px;
}

.img4 {
    right: -30px;
    top: 350px;
}

.img5 {
    left: 54px;
    top: 120px;
}

.img6 {
    right: 54px;
    top: 120px;
}

.img7 {
    left: 54px;
    top: 620px;
}

.img8 {
    right: 54px;
    top: 620px;
}

@keyframes roll {
    from {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes roll1 {
    from {
        transform: rotate(360deg);
    }

    50% {
        transform: rotate(180deg);
    }

    to {
        transform: rotate(0deg);
    }
}

Leave a Comment

Your email address will not be published. Required fields are marked *