移動條紋處理背景圖像，但不與背景漸變

-1

我的代碼與background-image完美工作，但我想要刪除圖像和使用相同的確切代碼，並保持相同的確切功能，同時使用漸變（與background），而不是圖片。移動條紋處理背景圖像，但不與背景漸變

這裏是我的代碼（片段）：

.gangina { 
 
    /*background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);*/ 
 
    background-image: url("http://s1.directupload.net/images/130503/xo29uiim.png"); 
 
    background-position: 0 0; 
 
    border: 1px solid #ccc; 
 
    display: block; 
 
    height: 30px; 
 
    width: 150px; 
 
} 
 
.hezi { 
 
    -moz-animation: hezi 4s infinite linear; 
 
    -ms-animation: hezi 4s infinite linear; 
 
    -o-animation: hezi 4s infinite linear; 
 
    -webkit-animation: hezi 4s infinite linear; 
 
    animation: hezi 4s infinite linear; 
 
} 
 
@keyframes "hezi" { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: -100% 0; 
 
    } 
 
} 
 
@-moz-keyframes hezi { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: -100% 0; 
 
    } 
 
} 
 
@-webkit-keyframes "hezi" { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: -100% 0; 
 
    } 
 
} 
 
@-ms-keyframes "hezi" { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: -100% 0; 
 
    } 
 
} 
 
@-o-keyframes "hezi" { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: -100% 0; 
 
    } 
 
}

<div class="gangina hezi"></div>

但我不想依靠圖像所以我想刪除背景圖像，並使用梯度像代碼如下：

background:repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px);

這裏需要小的調整，以與background財產和漸變的動畫作品。

來源

2015-05-02 davidmarko

記住'background'是很多的屬性速記...確保你的國家，在申報相關的。 https://developer.mozilla.org/en-US/docs/Web/CSS/background –

據我所知，'重複線性漸變'動畫需要'背景大小'。試着給一些像'background-size：20px 20px;'（*注意：*你的漸變模式不會保持不變，你將不得不相應地調整它）。 – Harry

@哈利謝謝人！現在它工作了！ :-) – davidmarko

重複線性漸變通常需要設置background-size屬性以使動畫正常工作。

對於這種情況，您可以設置background-size: 28px 100%;並且動畫可以正常工作（請參閱下面的代碼段）。

.gangina { 
 
    background: -webkit-repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); 
 
    background: -moz-repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); 
 
    background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); 
 
    background-position: 0 0; 
 
    background-size: 28px 100%; 
 
    border: 1px solid #ccc; 
 
    display: block; 
 
    height: 30px; 
 
    width: 150px; 
 
} 
 
.hezi { 
 
    -moz-animation: hezi 0.8s infinite linear; 
 
    -ms-animation: hezi 0.8s infinite linear; 
 
    -o-animation: hezi 0.8s infinite linear; 
 
    -webkit-animation: hezi 0.8s infinite linear; 
 
    animation: hezi 0.8s infinite linear; 
 
} 
 
@keyframes "hezi" { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: -28px 0; 
 
    } 
 
} 
 
@-moz-keyframes hezi { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: -28px 0; 
 
    } 
 
} 
 
@-webkit-keyframes "hezi" { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: -28px 0; 
 
    } 
 
} 
 
@-ms-keyframes "hezi" { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: -28px 0; 
 
    } 
 
} 
 
@-o-keyframes "hezi" { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: -28px 0; 
 
    } 
 
}

<div class="gangina hezi"></div>

來源

2015-05-02 09:28:33 Harry

移動條紋處理背景圖像，但不與背景漸變

回答

相關問題