如何將影像拆分為4個三角形-有解無憂

目前它是用顏色來做的，如果我想用影像代替，那該怎么做？

如您所見，它使用顏色可以正常作業，我怎么能在這里使用影像，它以相同的方式分解為 4 個三角形？

這將如何完成？

單擊播放按鈕會使其分成 4 個三角形。

影像解析度：640 x 360

  background: url("https://i.imgur.com/N15HzPQ.jpg");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;

代碼https://jsfiddle.net/j10eurz3/

const manageCover = (function makeManageCover() {

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function openCurtain(cover) {
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const curtain = openCurtain(cover);
    showVideo(curtain);
    cover.dispatchEvent(new Event("afterClick"));
  }

  function init(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
    cover.addEventListener("afterClick", callback);
  }

  return {
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  let player;

  function loadIframeScript() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    addPlayer(frameContainer);
  }

  function onPlayerReady() {
    player.setVolume(100);
  }

  function addPlayer(video) {
    const options = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: video.dataset.id,
      width: 640
    };
    options.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      rel: 0
    };
    options.events = {
      "onReady": onPlayerReady
    };

    options.playerVars.loop = 1;
    options.playerVars.playlist = video.dataset.id;
    player = new YT.Player(video, options);
  }

  function play() {
    if (player && player.playVideo) {
      player.playVideo();
    }
  }

  function init() {
    player = null;
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    return play;
  }

  return {
    init,
    play
  };
}());
manageCover.init(videoPlayer.init());

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  /*min-width: 255px;*/
  display: flex;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;

}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}

.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid #333;
  pointer-events: none;
}


.curtain.slide::after {
  outline: 1px solid #0059dd;
  transition: outline 2s ease-in;
  /*  add this */
  /*background-image: none;*/
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 3s ease-in 0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.panel-up,
.panel-down,
.panel-left,
.panel-right {
  position: absolute;
  transition: all 8s ease;
  transition-delay: 0s;
  overflow: hidden;
  width: 0;
  height: 0;
}

.panel-up {
  left: -100%;
  right: -100%;
  margin: 0 auto;
  bottom: 50%;
  border-top: 180px solid red;
  border-left: 320px solid transparent;
  border-right: 320px solid transparent;
}

.panel-down {
  left: -100%;
  right: -100%;
  margin: 0 auto;
  top: 50%;
  border-bottom: 180px solid blue;
  border-left: 320px solid transparent;
  border-right: 320px solid transparent;
}

.panel-left {
  top: -100%;
  bottom: -100%;
  right: 50%;
  margin: auto 0;
  border-left: 320px solid green;
  border-top: 180px solid transparent;
  border-bottom: 180px solid transparent;
}

.panel-right {
  top: -100%;
  bottom: -100%;
  left: 50%;
  margin: auto 0;
  border-right: 320px solid yellow;
  border-top: 180px solid transparent;
  border-bottom: 180px solid transparent;
}

.curtain.slide .panel-up {
  transform: translateY(calc(-100% - 1px));
}

.curtain.slide .panel-down {
  transform: translateY(calc(100%   1px));
}

.curtain.slide .panel-left {
  transform: translateX(calc(-100% - 1px));
}

.curtain.slide .panel-right {
  transform: translateX(calc(100%   1px));
}

.play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  animation: rotate 700ms linear forwards;
  border-color: red transparent red transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  color: #303030;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: blue;
  }
}

.play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid;
  transform: translateX(4px);
  animation: triangle 700ms linear forwards;
}

@keyframes triangle {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: blue;
    opacity: 1;
  }
}

.play:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.play:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

.slide .exit {
  animation: fadeInExit 4s forwards 7.5s;
}


@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit::before,
.exit::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.exit::before {
  transform: rotate(45deg);
}

.exit::after {
  transform: rotate(-45deg);
}

.hide {
  display: none;
}

<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">

      <div class="wrap hide">
        <div class="video video-frame" data-id="CHahce95B1g"></div>

      </div>
      
      <div class="panel-up"></div>
      <div class="panel-down"></div>
      <div class="panel-left"></div>
      <div class="panel-right"></div>
 
      
    </div>
    <a href="https://www.google.com/">
      <div class="exit"></div>
      </a>

  </div>
  <button class="play" type="button" aria-label="Open"></button>
</div>

uj5u.com熱心網友回復：

可以通過在四個元素中的每個元素上使用具有特定區域的剪輯路徑1px來完成，每個元素使用相同的背景影像，然后移動兩個相反的元素以補償clip-path間隙（或者，該補償可以包含在剪輯路徑中地區）：

const manageCover = (function makeManageCover() {

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function openCurtain(cover) {
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const curtain = openCurtain(cover);
    showVideo(curtain);
    cover.dispatchEvent(new Event("afterClick"));
  }

  function init(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
    cover.addEventListener("afterClick", callback);
  }

  return {
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  let player;

  function loadIframeScript() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    addPlayer(frameContainer);
  }

  function onPlayerReady() {
    player.setVolume(100);
  }

  function addPlayer(video) {
    const options = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: video.dataset.id,
      width: 640
    };
    options.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      rel: 0
    };
    options.events = {
      "onReady": onPlayerReady
    };

    options.playerVars.loop = 1;
    options.playerVars.playlist = video.dataset.id;
    player = new YT.Player(video, options);
  }

  function play() {
    if (player && player.playVideo) {
      player.playVideo();
    }
  }

  function init() {
    player = null;
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    return play;
  }

  return {
    init,
    play
  };
}());
manageCover.init(videoPlayer.init());

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  /*min-width: 255px;*/
  display: flex;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;

}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}

.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid #333;
  pointer-events: none;
}


.curtain.slide::after {
  outline: 1px solid #0059dd;
  transition: outline 2s ease-in;
  /*  add this */
  /*background-image: none;*/
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 3s ease-in 0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.panel-up,
.panel-down,
.panel-left,
.panel-right {
  position: absolute;
  transition: all 8s ease;
  transition-delay: 0s;
  width: 100%;
  height: 100%;
  top: 0;
  background: url(https://images.pexels.com/photos/547114/pexels-photo-547114.jpeg) no-repeat center/cover;
}

.panel-up {
  clip-path: polygon(0 0, 50% 50%, 100% 0, 0 0);
  top: 1px;
}

.panel-down {
  clip-path: polygon(0 100%, 50% 50%, 100% 100%, 0 100%);
  top: -1px;
}

.panel-left {
  clip-path: polygon(0 0, 50% 50%, 0 100%, 0 0);
}

.panel-right {
  clip-path: polygon(100% 0, 50% 50%, 100% 100%, 100% 0);
}

.curtain.slide .panel-up {
  transform: translateY(calc(-100% - 1px));
}

.curtain.slide .panel-down {
  transform: translateY(calc(100%   1px));
}

.curtain.slide .panel-left {
  transform: translateX(calc(-100% - 1px));
}

.curtain.slide .panel-right {
  transform: translateX(calc(100%   1px));
}

.play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  animation: rotate 700ms linear forwards;
  border-color: red transparent red transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  color: #303030;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: blue;
  }
}

.play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid;
  transform: translateX(4px);
  animation: triangle 700ms linear forwards;
}

@keyframes triangle {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: blue;
    opacity: 1;
  }
}

.play:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.play:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

.slide .exit {
  animation: fadeInExit 4s forwards 7.5s;
}


@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit::before,
.exit::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.exit::before {
  transform: rotate(45deg);
}

.exit::after {
  transform: rotate(-45deg);
}

.hide {
  display: none;
}

<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">

      <div class="wrap hide">
        <div class="video video-frame" data-id="CHahce95B1g"></div>

      </div>
      
      <div class="panel-up"></div>
      <div class="panel-down"></div>
      <div class="panel-left"></div>
      <div class="panel-right"></div>
 
      
    </div>
    <a href="https://www.google.com/">
      <div class="exit"></div>
      </a>

  </div>
  <button class="play" type="button" aria-label="Open"></button>
</div>

uj5u.com熱心網友回復：

您可以使用 clip-path 來勾勒每個三角形，而不是按照您的方式繪制三角形。

如果這些面板中的每一個都具有父級的大小，并且每個面板都有背景影像“音樂”，那么它將看起來好像只有一個影像開始。

當 .slide 添加到窗簾元素時，每個三角形都可以適當地向左、向右、向上、向下過渡（分別為其寬度或高度的 100%）。

此代碼使用您現有的 HTML 和 JS，并僅更改面板的 CSS：

<style>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  /*min-width: 255px;*/
  display: flex;
}


.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 3s ease-in 0s forwards;
}

iframe {
  user-select: none;
}


.play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  animation: rotate 700ms linear forwards;
  border-color: red transparent red transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  color: #303030;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: blue;
  }
}

.play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid;
  transform: translateX(4px);
  animation: triangle 700ms linear forwards;
}

@keyframes triangle {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: blue;
    opacity: 1;
  }
}

.play:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.play:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

.slide .exit {
  animation: fadeInExit 4s forwards 7.5s;
}


@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit::before,
.exit::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.exit::before {
  transform: rotate(45deg);
}

.exit::after {
  transform: rotate(-45deg);
}

.hide {
  display: none;
}

* {
  margin: 0;
}
[class*="panel-"] {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-image: url(https://i.imgur.com/N15HzPQ.jpg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: black;
  transition: all 8s ease;
  transform: translate(0, 0);
  --x: 0;
  --y: 0;
}
.curtain.slide [class*="panel-"] {
  transform: translate(var(--x), var(--y));
}
.panel-up {
  --y: -100%; 
  clip-path: polygon(0 0, 50% 50%, 100% 0);
}
.panel-right {
  --x: 100%; 
  clip-path: polygon(100% 0, 50% 50%, 100% 100%);
}
.panel-down {
  --y: 100%; 
  clip-path: polygon(100% 100%, 50% 50%, 0 100%);
}
.panel-left {
  --x: -100%; 
  clip-path: polygon(0 100%, 50% 50%, 0 0);
}

</style>
<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">

      <div class="wrap hide">
        <div class="video video-frame" data-id="CHahce95B1g"></div>

      </div>
      
      <div class="panel-up"></div>
      <div class="panel-down"></div>
      <div class="panel-left"></div>
      <div class="panel-right"></div>
 
      
    </div>
    <a href="https://www.google.com/">
      <div class="exit"></div>
      </a>

  </div>
  <button class="play" type="button" aria-label="Open"></button>
</div>
<script>
const manageCover = (function makeManageCover() {

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function openCurtain(cover) {
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const curtain = openCurtain(cover);
    showVideo(curtain);
    cover.dispatchEvent(new Event("afterClick"));
  }

  function init(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
    cover.addEventListener("afterClick", callback);
  }

  return {
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  let player;

  function loadIframeScript() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    addPlayer(frameContainer);
  }

  function onPlayerReady() {
    player.setVolume(100);
  }

  function addPlayer(video) {
    const options = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: video.dataset.id,
      width: 640
    };
    options.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      rel: 0
    };
    options.events = {
      "onReady": onPlayerReady
    };

    options.playerVars.loop = 1;
    options.playerVars.playlist = video.dataset.id;
    player = new YT.Player(video, options);
  }

  function play() {
    if (player && player.playVideo) {
      player.playVideo();
    }
  }

  function init() {
    player = null;
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    return play;
  }

  return {
    init,
    play
  };
}());
manageCover.init(videoPlayer.init());

</script>

這里是一個 SO 片段，但請注意，在這種情況下，底層視頻不會播放，因為該片段已經在 iframe 中：

const manageCover = (function makeManageCover() {

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function openCurtain(cover) {
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const curtain = openCurtain(cover);
    showVideo(curtain);
    cover.dispatchEvent(new Event("afterClick"));
  }

  function init(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
    cover.addEventListener("afterClick", callback);
  }

  return {
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  let player;

  function loadIframeScript() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    addPlayer(frameContainer);
  }

  function onPlayerReady() {
    player.setVolume(100);
  }

  function addPlayer(video) {
    const options = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: video.dataset.id,
      width: 640
    };
    options.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      rel: 0
    };
    options.events = {
      "onReady": onPlayerReady
    };

    options.playerVars.loop = 1;
    options.playerVars.playlist = video.dataset.id;
    player = new YT.Player(video, options);
  }

  function play() {
    if (player && player.playVideo) {
      player.playVideo();
    }
  }

  function init() {
    player = null;
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    return play;
  }

  return {
    init,
    play
  };
}());
manageCover.init(videoPlayer.init());

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  /*min-width: 255px;*/
  display: flex;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 3s ease-in 0s forwards;
}

iframe {
  user-select: none;
}

.play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  animation: rotate 700ms linear forwards;
  border-color: red transparent red transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  color: #303030;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }
  100% {
    transform: rotate(360deg);
    border-color: blue;
  }
}

.play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid;
  transform: translateX(4px);
  animation: triangle 700ms linear forwards;
}

@keyframes triangle {
  0% {
    opacity: 0;
  }
  99.9% {
    opacity: 0;
  }
  100% {
    border-left-color: blue;
    opacity: 1;
  }
}

.play:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.play:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

.slide .exit {
  animation: fadeInExit 4s forwards 7.5s;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }
  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit::before,
.exit::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.exit::before {
  transform: rotate(45deg);
}

.exit::after {
  transform: rotate(-45deg);
}

.hide {
  display: none;
}

* {
  margin: 0;
}

[class*="panel-"] {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-image: url(https://i.imgur.com/N15HzPQ.jpg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: black;
  transition: all 8s ease;
  transform: translate(0, 0);
  --x: 0;
  --y: 0;
}

.curtain.slide [class*="panel-"] {
  transform: translate(var(--x), var(--y));
}

.panel-up {
  --y: -100%;
  clip-path: polygon(0 0, 50% 50%, 100% 0);
}

.panel-right {
  --x: 100%;
  clip-path: polygon(100% 0, 50% 50%, 100% 100%);
}

.panel-down {
  --y: 100%;
  clip-path: polygon(100% 100%, 50% 50%, 0 100%);
}

.panel-left {
  --x: -100%;
  clip-path: polygon(0 100%, 50% 50%, 0 0);
}

<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">

      <div class="wrap hide">
        <div class="video video-frame" data-id="CHahce95B1g"></div>

      </div>

      <div class="panel-up"></div>
      <div class="panel-down"></div>
      <div class="panel-left"></div>
      <div class="panel-right"></div>


    </div>
    <a href="https://www.google.com/">
      <div class="exit"></div>
    </a>

  </div>
  <button class="play" type="button" aria-label="Open"></button>
</div>

uj5u.com熱心網友回復：

更新的答案，您可以使用剪輯路徑為同一影像創建四個蒙版。在這個例子中，我使用 CSS 影片來移動三角形。

body {
  margin:0;
  padding:0;
}

div {
  box-sizing:border-box;
  position: absolute;
  width:230px;
  height:130px;
}
div img {
  width:100%;
}
#left {
  clip-path: polygon(0% 0%, 50% 50%, 0% 100%);
    animation:move-left 2s ease-in infinite;
}
#top {
  clip-path: polygon(0% 0%, 50% 50%, 100% 0%);
  animation:move-up 2s ease-in infinite;
}
#right {
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
    animation:move-right 2s ease-in infinite;
}
#bottom {
  clip-path: polygon(0% 100%, 50% 50%, 100% 100%);
    animation:move-down 2s ease-in infinite;
}
@keyframes move-up {
  from {
    transform:translateY(0px);
  }
  to {
    transform:translateY(-130px);
  }
}
@keyframes move-down {
  from {
    transform:translateY(0px);
  }
  to {
    transform:translateY(130px);
  }
}
@keyframes move-right {
  from {
    transform:translateX(0px);
  }
  to {
    transform:translateX(230px);
  }
}
@keyframes move-left {
  from {
    transform:translateX(0px);
  }
  to {
    transform:translateX(-230px);
  }
}

<div id="left">
  <img src="https://i.imgur.com/N15HzPQ.jpg">
</div>

<div id="top">
  <img src="https://i.imgur.com/N15HzPQ.jpg">
</div>

<div id="right">
  <img src="https://i.imgur.com/N15HzPQ.jpg">
</div>
<div id="bottom">
  <img src="https://i.imgur.com/N15HzPQ.jpg">
</div>

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

標籤：htmlcss图片背景图片

上一篇：將Discord附件轉換為二進制

下一篇：在檔案上傳預覽中減小影像的檔案大小，而不影響要上傳的檔案的大小-JavaScript