搞一搞静态png图片实现gif效果

 

摘自csdn渲染图

页面放一个div背景设置图片 

div{

background: url('//csdnimg.cn/release/bss/fe/2b69291/themes/topic/blog_star2019/images/banner.png') no-repeat center;

    background-size: cover;

    height: 754px;

     animation-duration: 2.5s;

    animation-delay: .2s;

    animation-timing-function: ease-in-out;

    animation-name: scalx;

    animation-iteration-count:infinite;

    -webkit-animation-iteration-count:infinite;

}

添加动画

@-webkit-keyframes scalx {
    0% {

        -webkit-transform: scaleX(1);
        transform: scaleX(1);

    }
    50% {
        -webkit-transform: scaleX(1.1);
        transform: scaleX(1.1);
    }
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@keyframes scalx {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    50% {
        -webkit-transform: scaleX(1.1);
        transform: scaleX(1.1);
    }
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

出现底部滚动条抖的现象

将body设置overflow：hiiden