CSS3 realisiert die Mask Barrage-Funktion

.Maskenbild {
    Breite: 250px;
    Höhe: 187,5px;
    -webkit-mask-image: URL (Maske.png);
    Maskenbild: URL (Maske.png);
}

<div Klasse="Container">
    <div Klasse="Barrage-Wrapper">
    </div>
  </div>

.container {
  Breite: 900px;
  Höhe: 506px;
  Hintergrund: URL (Banner.jpg) No-Repeat-Center;
  Hintergrundgröße: Abdeckung;
  
}
.Barrage-Wrapper {
  Breite: 100 %;
  Höhe: 100%;
  Position: relativ;
  Maskenbild: URL (Maske.png);
  -webkit-mask-image: URL (Maske.png);
}

@Keyframes Sperrfeuer{
  aus{
    links: 100 %;
    transformieren:übersetzenX(0);
  }
  Zu{
    links: 0;
    transformieren: übersetzenX(-100%);
  }
}
.Block{
  Position: absolut;
  oben: 50 %;
  links: 100 %;
  Breite: 100 %;
  Farbe: #fff;
}

// Generiere eine Zufallszahl von 0 bis zum Bereich const geneNumber = range => Math.floor(Math.random() * range)
    var Sperrfeuer = [
      ‚Airdrop erfolgreich‘, ‚Warnung vor echtem Geruch‘, ‚Freundliche Erinnerung, bitte vorher Lautstärke aufdrehen/schnell Kopfhörer aufsetzen‘, ‚Bullet-Displayschutz! Schutzbombardement! Schutzbombardement! ', 'Alle oben genannten Unternehmen sind bankrott gegangen', 'Viel Energie voraus', 'Ich habe noch nie eine so schamlose Person gesehen', 'Herzlichen Glückwunsch zum Ende',
      ‚Airdrop erfolgreich‘, ‚Warnung vor echtem Geruch‘, ‚Freundliche Erinnerung, bitte vorher Lautstärke aufdrehen/schnell Kopfhörer aufsetzen‘, ‚Bullet-Displayschutz! Schutzbombardement! Schutzbombardement! ', 'Alle oben genannten Unternehmen sind bankrott gegangen', 'Viel Energie voraus', 'Ich habe noch nie eine so schamlose Person gesehen', 'Herzlichen Glückwunsch zum Ende',
      ‚Airdrop erfolgreich‘, ‚Warnung vor echtem Geruch‘, ‚Freundliche Erinnerung, bitte vorher Lautstärke aufdrehen/schnell Kopfhörer aufsetzen‘, ‚Bullet-Displayschutz! Schutzbombardement! Schutzbombardement! ', 'Alle oben genannten Unternehmen sind bankrott gegangen', 'Viel Energie voraus', 'Ich habe noch nie eine so schamlose Person gesehen', 'Herzlichen Glückwunsch zum Ende',
      ‚Airdrop erfolgreich‘, ‚Warnung vor echtem Geruch‘, ‚Freundliche Erinnerung, bitte vorher Lautstärke aufdrehen/schnell Kopfhörer aufsetzen‘, ‚Bullet-Displayschutz! Schutzbombardement! Schutzbombardement! ', 'Alle oben genannten Unternehmen sind bankrott gegangen', 'Viel Energie voraus', 'Ich habe noch nie eine so schamlose Person gesehen', 'Herzlichen Glückwunsch zum Ende',
      ‚Airdrop erfolgreich‘, ‚Warnung vor echtem Geruch‘, ‚Freundliche Erinnerung, bitte vorher Lautstärke aufdrehen/schnell Kopfhörer aufsetzen‘, ‚Bullet-Displayschutz! Schutzbombardement! Schutzbombardement! ', 'Alle oben genannten Unternehmen sind bankrott gegangen', 'Viel Energie voraus', 'Ich habe noch nie eine so schamlose Person gesehen', 'Herzlichen Glückwunsch zum Ende',
      ‚Airdrop erfolgreich‘, ‚Warnung vor echtem Geruch‘, ‚Freundliche Erinnerung, bitte vorher Lautstärke aufdrehen/schnell Kopfhörer aufsetzen‘, ‚Bullet-Displayschutz! Schutzbombardement! Schutzbombardement! ', 'Alle oben genannten Unternehmen sind bankrott gegangen', 'Viel Energie voraus', 'Ich habe noch nie eine so schamlose Person gesehen', 'Herzlichen Glückwunsch zum Ende',
      ‚Airdrop erfolgreich‘, ‚Warnung vor echtem Geruch‘, ‚Freundliche Erinnerung, bitte vorher Lautstärke aufdrehen/schnell Kopfhörer aufsetzen‘, ‚Bullet-Displayschutz! Schutzbombardement! Schutzbombardement! ', 'Alle oben genannten Unternehmen sind bankrott gegangen', 'Viel Energie voraus', 'Ich habe noch nie eine so schamlose Person gesehen', 'Herzlichen Glückwunsch zum Ende',
    ]
    const wrapper = document.querySelector('.barrage-wrapper')
    für (const item of barrages) {
      const block = dokument.createElement('div')
      block.classList.add('block')
      block.style.top = geneNumber(486) + 'px' // Die Position der Aufzählungsnachricht darf die Höhe des Containers nicht überschreiten block.style.animation = `barrage ${geneNumber(20)}s linear ${geneNumber(60)}s` // Zufälliger Animationseffekt block.textContent = item
      Wrapper.AnhängenKind(Block)
    }