使平滑的动态条纹格

我无法做一个平滑的动态条纹格，就像一个进度条。使平滑的动态条纹格

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

使平滑的动态条纹格

回答

相关问题