視頻背景英雄底部的SVGWave影片-有解無憂

我的網頁上有一個英雄部分，我想在底部創建一個影片波浪影片。英雄部分顯示視頻背景。

我有視頻背景和影片波浪，但是，我被困在兩者之間有一個筆直的藍色邊框，如圖所示。

視頻背景英雄底部的 SVG Wave 影片

我可以使用負邊距將波浪帶到視頻背景之上，但最終還是會出現硬邊框。

這可能是我實作 SVG 的方式，但我現在有點迷失了。

為簡潔起見，我洗掉了一些元素（按鈕，因為這沒有區別）這是 HTML。

<div class="newHero">
  <h2>Using Sail Training to Inspire & Change Lives</h2>
  <p>Morvargh Sailing Project is a youth development organisation that helps young people become more confident, more resilient, more motivated and better able to communicate though volunteer led, life-changing sail training voyages.</p>
  <a href="tel:xxxx" class="d-flex align-items-center"><i class="fa-solid fa-phone-volume"></i>Contact Us</a>
  <video class="video-bg" autoplay muted loop>
    <source src="frontend/vid/MSP.mp4" type="video/mp4" >
  </video>
</div>
<div class="waves">
  <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none">
    <defs>
      <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
    </defs>
    <g class="wave1">
      <use xlink:href="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)">
    </g>
    <g class="wave2">
      <use xlink:href="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)">
    </g>
    <g class="wave3">
      <use xlink:href="#wave-path" x="50" y="9" fill="#fff">
    </g>
  </svg>
</div>

這是CSS

<style>
.newHero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(160deg, rgba(46, 59, 78,1), rgba(255, 64, 64,0.3));
  /*background: rgba(46, 59, 78, 0.85);*/
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 70vh;
}
.newHero h2 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
  max-width: 550px;
}
.newHero p {
  max-width: 550px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: 30px;
}

.newHero a {
  font-size: 20px;
  transition: 0.5s;
  margin-left: 25px;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
}

.newHero a:hover i {
  color: #fff;
}   

.newHero i {
  color: rgba(255, 255, 255, 0.5);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 12px;
}

.video-bg {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

.waves {
  background: rgba(46, 59, 78, 0.75);
  height: 60px;
  width: 100%;
  z-index: 10;
}

.wave1 use {
  -webkit-animation: move-forever1 10s linear infinite;
  animation: move-forever1 10s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave2 use {
  -webkit-animation: move-forever2 8s linear infinite;
  animation: move-forever2 8s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave3 use {
  -webkit-animation: move-forever3 6s linear infinite;
  animation: move-forever3 6s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

@-webkit-keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@-webkit-keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@-webkit-keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

</style>

誰能給我一些關于如何制作沒有硬邊框的波浪影片的指示？

uj5u.com熱心網友回復：

該類.waves具有您需要洗掉的背景顏色。然后你可以使用負邊距來拉高波浪。我還添加position:relative了它，.waves因此它適用于z-index.

.newHero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(160deg, rgba(46, 59, 78,1), rgba(255, 64, 64,0.3));
  /*background: rgba(46, 59, 78, 0.85);*/
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 70vh;
}
.newHero h2 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
  max-width: 550px;
}
.newHero p {
  max-width: 550px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: 30px;
}

.newHero a {
  font-size: 20px;
  transition: 0.5s;
  margin-left: 25px;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
}

.newHero a:hover i {
  color: #fff;
}   

.newHero i {
  color: rgba(255, 255, 255, 0.5);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 12px;
}

.video-bg {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

.waves {
  height: 60px;
  width: 100%;
  margin-top: -30px;
  z-index: 10;
  position: relative;
}

.wave1 use {
  -webkit-animation: move-forever1 10s linear infinite;
  animation: move-forever1 10s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave2 use {
  -webkit-animation: move-forever2 8s linear infinite;
  animation: move-forever2 8s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave3 use {
  -webkit-animation: move-forever3 6s linear infinite;
  animation: move-forever3 6s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

@-webkit-keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@-webkit-keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@-webkit-keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

<div class="newHero">
  <h2>Using Sail Training to Inspire & Change Lives</h2>
  <p>Morvargh Sailing Project is a youth development organisation that helps young people become more confident, more resilient, more motivated and better able to communicate though volunteer led, life-changing sail training voyages.</p>
  <a href="tel:xxxx" class="d-flex align-items-center"><i class="fa-solid fa-phone-volume"></i>Contact Us</a>
  <video class="video-bg" autoplay muted loop>
    <source src="frontend/vid/MSP.mp4" type="video/mp4" >
  </video>
</div>
<div class="waves">
  <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none">
    <defs>
      <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
    </defs>
    <g class="wave1">
      <use xlink:href="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)">
    </g>
    <g class="wave2">
      <use xlink:href="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)">
    </g>
    <g class="wave3">
      <use xlink:href="#wave-path" x="50" y="9" fill="#fff">
    </g>
  </svg>
</div>

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

標籤：htmlcsssvgCSS动画

上一篇：留下衰落軌跡的偏移路徑

下一篇：InkscapeSVG在Firefox中渲染不正確