css3 切换贞动画的效果，仿gif效果

最新推荐文章于 2024-03-29 03:34:03 发布

weixin_33910460

最新推荐文章于 2024-03-29 03:34:03 发布

阅读量356

点赞数

原文链接：http://www.cnblogs.com/Kummy/p/4882315.html

版权

博客展示了使用CSS3实现仿GIF切换帧动画的代码。定义了两组动画，分别设置了动画的名称、播放次数、时间函数和持续时间等属性，通过关键帧改变背景图片来实现动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*---第一组动画---*/
    .cartonGif_1{
        position: absolute;
        display: block;
        background:url("img/haihangzhuanqu/0-1.png") no-repeat center center/100% 100% ;
        -webkit-animation-name: charector-1;/* 动画名称 */
        -webkit-animation-iteration-count: infinite;/* 动画无限播放 */
        -webkit-animation-timing-function: step-start;/* 马上跳到动画每一结束桢的状态 */
        -webkit-animation-duration: 950ms;/* 动画运行的时间 */
    }
    @-webkit-keyframes charector-1{
        0% {background-position: 0 0;}
        25% {background:url("img/haihangzhuanqu/0-1.png")  no-repeat center center/100% 100%;}
        50% {background:url("img/haihangzhuanqu/0-2.png")  no-repeat center center/100% 100%;}
        75% {background:url("img/haihangzhuanqu/0-3.png")  no-repeat center center/100% 100%;}
        100% {background:url("img/haihangzhuanqu/0-4.png")  no-repeat center center/100% 100%;}
    }
    /*---第二组动画---*/
    .cartonGif_2{
        position: absolute;
        display: block;
        background:url("img/haihangzhuanqu/1-1.png")  no-repeat center center/100% 100%;
        -webkit-animation-name: charector-2;/* 动画名称 */
        -webkit-animation-iteration-count: infinite;/* 动画无限播放 */
        -webkit-animation-timing-function: step-start;/* 马上跳到动画每一结束桢的状态 */
        -webkit-animation-duration: 950ms;/* 动画运行的时间 */
    }
    @-webkit-keyframes charector-2{
        0% {background-position: 0 0;}
        25% {background:url("img/haihangzhuanqu/1-1.png")  no-repeat center center/100% 100%;}
        50% {background:url("img/haihangzhuanqu/1-2.png")  no-repeat center center/100% 100%;}
        75% {background:url("img/haihangzhuanqu/1-3.png")  no-repeat center center/100% 100%;}
        100% {background:url("img/haihangzhuanqu/1-4.png")  no-repeat center center/100% 100%;}
    }