html - 如何使覆盖元素响应

Question

在 1920*1080 的屏幕上，播放键和外面的波浪正好在笔记本电脑的图像屏幕内，一切都很好。

但是，当我调整屏幕宽度时，播放按钮会独立移动到笔记本电脑屏幕上，并离开笔记本电脑图像的屏幕。它也不会改变它的大小，所以它变得丑陋！

如何使其响应笔记本电脑图像屏幕的大小并将播放按钮固定在笔记本电脑屏幕内？

我尝试了 flexbox，但似乎我需要帮助...请帮助...

任何建议将不胜感激...

.videoContainer {
  padding-top: 14rem;
}


.video-play-button {
  position: relative;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  width: 32px;
  height: 44px;
  /* background: #fa183d; */
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  
}

.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #ba1f24;
  border-radius: 50%;

}

.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #fa183d;
  border-radius: 50%;
  transition: all 200ms;
}

.video-play-button:hover:after {
  background-color: darken(#fa183d, 10%);
}

.video-play-button img {
  position: relative;
  z-index: 3;
  max-width: 100%;
  width: auto;
  height: auto;
}

.video-play-button span {
  display: block;
  position: relative;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 32px solid #fff;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}

.video-box-computer {
  position: relative;
  display: flex;  
  justify-content: center;
  top: 180px
}

.videoImage {
  width: 45%;
}

.waves-block {
    position: absolute;
    float: center; 
    width: 384px;
    width: 24rem;
    height: 384px;
    height: 24rem;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.waves-block .waves {
    position: absolute;
    width: 24rem;
    height: 24rem;
    background: rgb(178, 163, 214, 0.2);
    opacity: 0;
    border-radius: 320px;
    -webkit-animation: waves 3s ease-in-out infinite;
    animation: waves 3s ease-in-out infinite;
}

.waves-block .wave-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
 .waves-block .wave-2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.waves-block .wave-3 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

@keyframes waves {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    50% {
        opacity: 0.9;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    }
    100% {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

<section class="videoContainer">

          <div class="video-box-computer">
              <img class="videoImage" src="http://demo.graygrids.com/themes/beam/imgs/macbook.png">
          </div>

          <a id="play-videoA" class="video-play-button" href="#">
          <span></span>

          <div class="waves-block">
            <div class="waves wave-1"></div>
            <div class="waves wave-2"></div>
            <div class="waves wave-3"></div>
          </div>

          </a>

 </section>

标签： htmlcss