Samstag, Februar 22, 2020

Macht geschmeidig animiert gestreift div

Ich bin Schwierigkeiten bei der Herstellung eines nahtlos animierten gestreift, div, wie ein Fortschrittsbalken.

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

Das problem ist, dass es eine seltsame Versatz auf der rechten Seite das Hintergrundbild Farbverlauf. Wie kann ich das korrigieren dieser Fehlausrichtung?

  • Wie über das ändern der width des Elements zu 283px?
InformationsquelleAutor Sir Neuman | 2015-07-21

3 Kommentare

  1. 6

    Haben Sie gesehen, dieses tutorial auf CSS-Tricks?

    CSS:

    @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

    HTML:

    <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>

  2. 4

    Nun habe ich es geschafft, es zu beheben nur, indem man eine Sache und machen keine änderungen an meinem ursprünglichen code. Einfach hinzufügen background-size: 150% 100%; hielt das Bild von clipping unbeholfen auf der rechten Seite.

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

    • Gut gemacht, es war viel einfacher, als ich dachte!
    • VIEL einfacher als die anderen Lösungen, die ich online gefunden-DANKE!
  3. 3

    Machen die linearen Verlauf mit Prozent-Werten, nicht mit Pixeln. gelten die hintergrund-Größe, in deinem Fall würde ich sagen, dass background-size:50px 50px; und in keyframes verschieben Sie den hintergrund so viel, wie ist der hintergrund Größe background-position: -50px 0px;

    Auch ein Beispiel
    http://plnkr.co/edit/HrSxkhYZaWp81fAQEaJn?p=preview

    Wenn die Antwort dir ZUSAGT, dann markiere es als beantwortet und einen schönen Tag noch 🙂

    • Hmm. Auch jetzt wenn ich mit Prozentangaben habe ich ein problem mit es gezackte Ränder auf die Streifen, das ist seltsam (sieht gleich aus, in Ihrem demo -). Ich bin bei dieser Suche in chrome

Kostenlose Online-Tests