不必要的摇晃与背景变化图片和颜色的机会

时间:2018-02-23 08:26:21

标签: html css

首先,我是编程的初学者。

我会感谢某人的帮助。我有一个背景我想改变关键帧图片和颜色。它有效,但是当图片发生变化时,我会遇到一些不必要的抖动问题。我没有使用javascript这个。

我的css

section#home{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
        animation: bgswap 50s;
      -webkit-animation: bgswap 50s;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        animation-iteration-count: infinite; 


.BackColorChange {
            width: 100vw;
            height: 100vh;
                animation: colorchange 25s;
              -webkit-animation: colorchange 25s;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                background-size: cover;
                -webkit-animation-iteration-count: infinite;
                -moz-animation-iteration-count: infinite;
                -o-animation-iteration-count: infinite;
                -ms-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
                -o-animation-timing-function: linear;
                -ms-animation-timing-function: linear;
                animation-timing-function: linear;
        }
        @keyframes colorchange
        {
            0%   {background: rgba(255,252,252,.75);}
            25%  {background: rgba(224,214,204,.5);}
            50%  {background: rgba(209,195,182,0);}
            75%  {background: rgba(224,214,204,.5);}
            100% {background: rgba(255,252,252,.75);}
        }
        @-webkit-keyframes colorchange
        {
            0%   {background: rgba(255,252,252,.75);}
            25%  {background: rgba(224,214,204,.5);}
            50%  {background: rgba(209,195,182,0);}
            75%  {background: rgba(224,214,204,.5);}
            100% {background: rgba(255,252,252,.75);}
        }
        @keyframes bgswap {
            0%   {background-image: url("http://getwallpapers.com/wallpaper/full/2/1/b/431542.jpg");}
            20%  {background-image: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-57593.jpg");}
            40%  {background-image: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-57593.jpg");}
            60%  {background-image: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-57593.jpg");}
            80%  {background-image: url("http://getwallpapers.com/wallpaper/full/2/1/b/431542.jpg");}
            100% {background-image: url("http://getwallpapers.com/wallpaper/full/2/1/b/431542.jpg");}
        }
        @-webkit-keyframes bgswap {
            0%   {background-image: url("http://getwallpapers.com/wallpaper/full/2/1/b/431542.jpg");}
            20%  {background-image: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-57593.jpg");}
            40%  {background-image: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-57593.jpg");}
            60%  {background-image: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-57593.jpg");}
            80%  {background-image: url("http://getwallpapers.com/wallpaper/full/2/1/b/431542.jpg");}
            100% {background-image: url("http://getwallpapers.com/wallpaper/full/2/1/b/431542.jpg");}
        }

0 个答案:

没有答案