幸福魔天輪效果

原創

2020-05-08 16:50

給大家分享一個摩天輪的動畫效果，實現蠻簡單的，沒什麼難度，純粹是爲了給CSDN的廣大宅男們貢獻福利，效果如下：

以下是具體的代碼實現：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸福魔天輪效果</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-size: cover;
            background-position: center center;
        }

        .box {
            border:solid 1px red;
            width: 1000px;
            height: 1000px;
            margin: 0px auto;
            position: relative;
        }
        .wheel {
            background: url("images/wheel.png");
            height: 768px;
            width: 768px;
            margin: 0px auto;
            -webkit-animation: wheelRotation 10s linear infinite;
            position: relative;
        }
        ul {
            list-style: none;
        }

        li {
            border-radius: 20px;
            height: 170px;
            width: 130px;
            position: absolute;
            -webkit-animation: childRotation 10s linear infinite;
            -webkit-transform-origin: 50% 0;
        }

        li:nth-child(1) {
            background: url("images/1.jpg");
            left: 330px;
            top: 0px;
        }

        li:nth-child(2) {
            background: url("images/2.jpg");
            left: 594px;
            top: 125px;
        }

        li:nth-child(3) {
            background: url("images/3.jpg");
            left: 694px;
            top: 370px;
        }

        li:nth-child(4) {
            background: url("images/4.jpg");
            left: 594px;
            top: 650px;
        }

        li:nth-child(5) {
            background: url("images/5.jpg");
            left: 330px;
            top: 740px;
        }

        li:nth-child(6) {
            background: url("images/6.jpg");
            left: 94px;
            top: 640px;
        }

        li:nth-child(7) {
            background: url("images/7.jpg");
            left: -6px;
            top: 370px;
        }

        li:nth-child(8) {
            background: url("images/8.jpg");
            left: 94px;
            top: 125px;
        }

        @-webkit-keyframes wheelRotation {
            0% {
                -webkit-transform: rotate(0deg);
            }

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

        @-webkit-keyframes childRotation {
            0% {
                -webkit-transform: rotate(0deg);
            }

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

        
        .bracket {
            width: 358px;
            height: 529px;
            background: url("images/bracket.png") no-repeat;
            position: absolute;
            left: 318px;
            top: 375px;
        }

        .bracket-small {
            width: 247px;
            height: 505px;
            background: url("images/bracket_small.png") no-repeat;
            position: absolute;
            left: 375px;
            top: 382px;
            z-index: -2;
        }

        .title {
            width: 577px;
            height: 257px;
            position: absolute;
            left: 212px;
            top: 269px;
            background-image: url("images/title.png");
        }
        .arrow {
            width: 48px;
            height: 64px;
            position: absolute;
            left: 482px;
            top: 550px;
            background: url("images/arrow.png") no-repeat;
        }
    </style>

</head>

<body>
    <div class="box">
        <div class="wheel">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="bracket"></div>
        <div class="bracket-small"></div>
        <div class="title"></div>
        <div class="arrow"></div>
    </div>
</body>

</html>

下面是效果中所引入的圖片，存放於images文件夾下，主要有以下這些：

1.轉盤 whell.png