[分享]css3摩天轮动画

CSS3摩天轮动画是一种炫酷的网页设计效果，可以吸引访问者的注意，提高网站的美观度和用户体验。下面介绍一下该动画的实现。 /设置基本样式/ wrapper{ margin: 0 auto; texta...

CSS3摩天轮动画是一种炫酷的网页设计效果，可以吸引访问者的注意，提高网站的美观度和用户体验。下面介绍一下该动画的实现。

 /*设置基本样式*/
    #wrapper{
        margin: 0 auto;
        text-align: center;
    }
    #wheel{
        width: 200px;
        height: 200px;
        position: relative;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden;
        transform-style: preserve-3d;
        animation: spin-wheel 10s linear infinite;
    }
    
    /*设置轮子下方的动物*/
    #animal{
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 50%);
        animation: move-animal 10s linear infinite;
    }
    
    /*设置轮子旋转的动画*/
    @keyframes spin-wheel{
        0%{ transform: rotateY(0deg);}
        100%{ transform: rotateY(360deg);}
    }
    
    /*设置动物运动的动画*/
    @keyframes move-animal{
        0%{ bottom: 0;}
        50%{ bottom: 80px;}
        100%{ bottom: 0;}
    } 

代码中，首先设置了整体的样式和基本样式，包括居中和圆形边框，同时通过overflow: hidden属性实现了遮盖动画元素的效果。接下来，通过transform-style: preserve-3d属性和@keyframes实现了轮子的旋转动画和小动物运动动画，并通过animation循环播放。