使平滑的動態條紋格

我無法做一個平滑的動態條紋格，就像一個進度條。使平滑的動態條紋格

CSS：

.animationStripes{ 
    width: 300px; 
    height: 50px; 
    background-image: repeating-linear-gradient(-45deg, rgb(0, 0, 0), rgb(0, 0, 0) 25px, blue 25px, blue 50px); 
    -webkit-animation:progress 2s linear infinite; 
    -moz-animation:progress 2s linear infinite; 
    -ms-animation:progress 2s linear infinite; 
    animation:progress 2s linear infinite; 
} 
@keyframes progress{ 
    0% { 
    background-position: 0 0; 
    } 
    100% { 
    background-position: -70px 0px; 
    } 
}

http://plnkr.co/edit/4wPv1ogKNMfJ6rQPhZdJ?p=preview

的問題是，有背景圖像梯度的最右側一個奇怪的錯位。我如何解決這個錯位？

來源

2015-07-21 Sir Neuman

如何改變元素'283px'的'width'？ – BillyNate

使線性梯度百分比值，不與像素。應用背景大小，你的情況我會說background-size:50px 50px;和關鍵幀，儘可能多的移動背景，是背景大小background-position: -50px 0px;

也是一個例子 http://plnkr.co/edit/HrSxkhYZaWp81fAQEaJn?p=preview

如果答案適合你，然後標記它作爲回答，並有一個美好的一天:)

來源

2015-07-21 18:50:03 Hendry

嗯。那麼現在，當我使用百分比時，我遇到了條紋上出現鋸齒狀邊緣的問題，這很奇怪（在演示中看起來相同）。我在鉻合金看這個 –

嗯，我設法解決它只是增加一件事，並沒有改變我的原代碼。只需添加background-size: 150% 100%;即可使圖像在右側不方便剪裁。

http://plnkr.co/edit/4wPv1ogKNMfJ6rQPhZdJ?p=preview

來源

2015-07-21 19:15:08

幹得好，那簡直就是我想的！ – Hendry

比我在網上找到的其他解決方案更容易 - 謝謝！ – Aaron

你看到的CSS技巧this tutorial？

@import url(https://fonts.googleapis.com/css?family=Ropa+Sans); 
 
body { 
 
    padding: 20px; 
 
    font-family: 'Ropa Sans', sans-serif; 
 
} 
 

 
.product { 
 
    width: 376px; 
 
    padding: 15px; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0 20px 0 0; 
 
} 
 

 
.product>img { 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
.product:hover .product-hover, 
 
.product:active .product-hover { 
 
    opacity: 1; 
 
} 
 

 
.product-hover { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    opacity: 0; 
 
    transition: opacity 0.3s ease; 
 
    background-size: 30px 30px; 
 
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); 
 
    animation: barberpole 0.5s linear infinite; 
 
} 
 

 
@keyframes barberpole { 
 
    from { 
 
    background-position: 0 0; 
 
    } 
 
    to { 
 
    background-position: 60px 30px; 
 
    } 
 
} 
 

 
.product-info { 
 
    position: absolute; 
 
    bottom: 30px; 
 
    right: 30px; 
 
    background: white; 
 
    width: 150px; 
 
    padding: 10px 10px 50px 10px; 
 
} 
 

 
.subhead { 
 
    color: #f00; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
} 
 

 
.product-name { 
 
    color: #990033; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    letter-spacing: -1px; 
 
} 
 

 
.price { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    right: 10px; 
 
} 
 

 
.amount { 
 
    color: red; 
 
    font-size: 150%; 
 
} 
 

 
.amount>span { 
 
    font-size: 75%; 
 
} 
 

 
h1 { 
 
    font-size: 72px; 
 
    margin: 2px 0 0 0; 
 
} 
 

 
VIEW SCSS CODE

<div class="product"> 
 
    <div class="product-hover"></div> <img src="http://fillmurray.com/300/300" /> 
 
    <div class="product-info"> 
 
    <div class="subhead">Sale</div> 
 
    <h2 class="product-name">Fleece</h2> 
 
    <p class="product-description">Beat the chill and get cozy.</p> 
 
    <div class="price"> <span class="from">from</span> <span class="amount">  <span>$</span>9.90 </span> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-07-19 17:25:32 Martin

使平滑的動態條紋格

回答

相關問題