HTML+CSS实现摩天轮效果

时间：2020-09-04 08:22:37 阅读：85 评论：0 收藏：0 [点我收藏+]

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

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>

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

HTML+CSS实现摩天轮效果

原文：https://www.cnblogs.com/zgjg/p/13610755.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)