课堂上的摩天轮小项目

　　这是一个课堂上的小小项目，就是利用CSS的动态效果做一个小孩在摩天轮上的小项目

　　先整理思路：1.让摩天轮转起来，找到合适的速度和让他不停地转

　　　　　　　　2.把小孩加上去，实现正常的转动，而不是小孩和摩天轮个转个的“二人转”

　　有了思路，开始动手，刚开始直接把摩天轮的照片加上去后发现，整个轮在围绕着一个点转，而不是摩天轮自己本身在转

　　……………………

　　后来还是想到了，放一个div，然后把摩天轮放进去，就可以实现摩天轮自己围绕自己的中心匀速转动了

　　就像这样的代码

　　

#div1{
            width: 600px;
            height: 600px;
            margin: 100px auto 0;
            animation: wheel 10s linear infinite;
            background-image: url("../img/a.png");
            background-size: 100% 100%;
            position: relative;
        }
        #div1>img{
           position: absolute;
            width: 100px;
            height: 100px;
            animation: kids 10s linear infinite;
            transform-origin: 50% 3%;
        }

 

　　然后最麻烦的一点就是要把小人加上去，而这个小人其实就是用定位和另一个旋转而形成相对的看似小人在摩天轮上的效果

　　至于定位就是让摩天轮静止的时候把小人定位到一个看似可以挂住他的地方

　　

#div1>img:nth-child(1){
            left: 250px;
            top: 20px;

 

　　而最主要的就是，如何让小孩围绕摩天轮的中心转，且要看起来随摩天轮转动，其实结果就是，和摩天轮反着转

　　

@keyframes wheel {
            from {transform: rotate(0);}
            to{transform: rotate(360deg);}
            /*from 可以改为0% , to可以改为100%*/
        }
        @keyframes kids {
            from {transform: rotate(360deg);}
            to{transform: rotate(0);}

　　这样，就实现了一个摩天轮带着一个小孩在自转的效果。

　　其实要想完成一个好的动画效果，不仅仅要有足够的能力，明白各种特效，会打各种代码，还有一点重要的就是要有一定的想象力。

标签：rotate,img,小孩,项目,100px,transform,课堂,摩天轮
来源： https://www.cnblogs.com/coisini123/p/15552968.html