HTML+CSS实现摩天轮效果

本文转载自查看原文 2020-09-03 21:23 541

实现效果：小人跟着轮子转，但小人要一直底部朝下

HTML代码：

<body>
    <div class="bbox">
        <div class="box">
            <img src="./images/fsw.png" alt="">
            <img src="./images/girl.png" alt="" class="pic1" id="yuan1">
            <img src="./images/girls.png" alt="" class="pic1" id="yuan2">
            <img src="./images/boy.png" alt="" class="pic1" id="yuan3">
            <img src="./images/dog.png" alt="" class="pic1" id="yuan4">
            <img src="./images/shamegirl.png" alt="" class="pic1" id="yuan5">
            <img src="./images/mimi.png" alt="" class="pic1" id="yuan6">
            <img src="./images/hairboy.png" alt="" class="pic1" id="yuan7">
            <img src="./images/mudog.png" alt="" class="pic1" id="yuan8">
        </div>
        <img src="./images/big-title.png" alt="" class="btit">
        <img src="./images/arrow.png" alt="" class="ltit">
        <img src="./images/bracket.png" alt="" class="ganzi">
    </div>
</body>

CSS代码：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height:100%;

        }
        body{
            background: url(./images/2.jpg);
            width: 100%;
        }
        .bbox{
            width: 600px;
            height: 600px;
            /* border: 1px solid #000; */
            margin: 100px auto;
            position: relative;
        }
        .box{ 
            width: 400px;
            height: 400px;
            margin: 0 auto;
            position: relative;;
            /* border: 1px solid #000; */
            animation: one 10s linear infinite;
        } 
        .box img{
            width: 100%;
            height: 100%;
            
        }
        .box .pic1{
            width: 80px;
            height: 80px;
            transform-origin:center 20%;
            position: absolute;
            animation: one1 10s linear infinite;
        }
        .box #yuan1{
            top: 0;
            left: 0;
             margin: auto;
            right: 0px;
        }
        .box #yuan2{
            bottom: -30px;
            left: 0;
            margin: auto;
            right: 0px;
        }
        .box #yuan3{
            bottom: 0;
             right: -20px;
             margin: auto;
             top: 0px;
        }
        .box #yuan4{
             bottom: 0;
             left: -20px;
             margin: auto;
             top: 0px;
        }
        .box #yuan5{
             right: 40px;
             top: 40px;
        }
        .box #yuan6{
             left: 40px;
             top: 40px;
        }
        .box #yuan7{
             left: 30px;
             bottom: 40px;
        }
        .box #yuan8{
             right: 30px;
             bottom: 40px;
        }
        @keyframes one{
            from{transform: rotate(0deg);}
            to{transform: rotate(360deg);}
        }
        @keyframes one1{
            from{transform: rotate(0deg);}
            to{transform: rotate(-360deg);}
        }
        .bbox .btit{
            width: 250px;
            height: 100px;
            position: absolute;
            top: 0;
            bottom: 240px;
            left: 0;
            right: 0;
            margin: auto;
        }
        .bbox .ltit{
            width: 50px;
            height: 50px;
            position: absolute;
            top: 100px;
            bottom: 240px;
            left: 0;
            right: 0;
            margin: auto;
        }
        .bbox .ganzi{
            width: 200px;
            position: absolute;
            top: 320px;
            bottom: 240px;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>

注意：让小人向相反的方向转，就可使其底部一直朝下

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 用css3实现摩天轮旋转的动画效果用HTML+CSS实现--折叠效果 HTML+CSS旋转木马效果 html+css 毛玻璃效果炫酷流光效果（HTML+CSS） HTML+CSS系列:登录界面实现 html+css实现星级评价【动画消消乐】HTML+CSS 白云飘动效果 072 html+css实现登陆页面 html+css实现简易下拉菜单