如何制作流暢無縫的無限HTML/CSS影片？-有解無憂

我一直在嘗試制作一條無限無縫的垂直滾動線，但由于重新啟動使整個頁面閃爍的影片而失敗。任何線索下一步去哪里？

這是通過嘗試示例并重寫它們制成的，但我沒有選擇。

這是我已經走了多遠：http: //galle.ri-ga.se/ll/

body {
  margin: 0;
  padding: 0;
  background-color: #39B54A;
}

h1 {
  background-color: #ff0;
  width: 40%;
  border-radius: 1px 25px 20px 1px;
  text-align: center;
  z-index: 2;
  font-family: Courier;
}

h6 {
  background-color: #ff0;
  width: 30%;
  border-radius: 1px 25px 20px 1px;
  text-align: center;
  z-index: 2;
  font-family: Courier;
}

logo-slider {
  border: 0px;
  width: 100%;
  z-index: -1;
}

logo-slider div {
  position: relative;
  animation: marquee 5s linear infinite;
  z-index: -1;
}

logo-slider svg {
  display: block;
  z-index: -1;
}

@keyframes marquee {
  0% {
    transform: translateY(-100%);
    z-index: -1;
  }
  100% {
    transform: translateY(0%);
    z-index: -1;
  }
}

<h1> galleri gasell &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;( ?° ??°)</h1><br>
<h6>coming soon</h6>
<logo-slider>
  <div class="hej2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon class="a" points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>

  <div class="hej2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon class="a" points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>

  <div class="hej2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon class="a" points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>
</logo-slider>

uj5u.com熱心網友回復：

這是你想要的樣子嗎？

*{
margin: 0;
  padding: 0;
  box-sizing:border-box;
}
body {
  margin: 0;
  padding: 0;
  background-color: #39B54A;
}

h1 {
  background-color: #ff0;
  width: 40%;
  border-radius: 1px 25px 20px 1px;
  text-align: center;
  z-index: 2;
  font-family: Courier;
}

h6 {
  background-color: #ff0;
  width: 30%;
  border-radius: 1px 25px 20px 1px;
  text-align: center;
  z-index: 2;
  font-family: Courier;
}

logo-slider {
  border: 0px;
  width: 100%;
  z-index: -1;
}

logo-slider div {
  position: relative;
  animation: marquee 5s linear infinite;
  z-index: -1;
  
  width:100%;
   transform: rotate(105deg);
}

logo-slider svg {
  display: block;
  z-index: -1;
}

@keyframes marquee {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  
  }
}

<h1> galleri gasell &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;( ?° ??°)</h1><br>
<h6>coming soon</h6>
<logo-slider>
  <div class="hej2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon class="a" points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>

  <div class="hej2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon class="a" points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>

  <div class="hej2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon class="a" points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>
</logo-slider>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/451025.html

標籤：html css 动画 svg

上一篇：如何在這里添加懸停？

下一篇：如何完美回圈feTurbulence影片