在调整大小窗口上调整元素大小

时间：2020-06-11 21:20:59

标签： html css

如果页面已调整大小，我们如何调整播放按钮元素的大小？

如果页面变小，我希望播放按钮变小...

我希望在调整屏幕尺寸时调整播放按钮的尺寸。

对我来说这有点复杂，因此不胜感激。

.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;
}

.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">

          <a 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>

ar，当我调整屏幕宽度的大小时，播放按钮的大小不会改变。

2 个答案:

答案 0 :(得分：1)

我以前看过你对这个问题的看法。并已经写下答案。请看一下，也许它会为您清除一些东西。

所有这些设置下，.video-play-button应该为position: absolute;

已更新

用％比例重写了.video-play-button的所有内部元素。

现在主要的魔法就在这里。 vw是视口宽度。 7vw =视口的7％。

.video-play-button {
  width: calc(20px + 7vw);
  height: calc(20px + 7vw);
}


.videoContainer {
  text-align: center;
}

.video-play-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: calc(20px + 7vw);
  height: calc(20px + 7vw);
  /* background: #fa183d; */
  border-radius: 50%;
  -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: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #ba1f24;
  border-radius: 50%;
}

.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  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: absolute;
  left: 54%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 3;
  width: 40%;
  height: 45%;
  background: #fff;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

.video-box-computer {
  position: relative;
  display: inline-block;
  width: 45%;
  top: 180px;
}

.videoImage {
  width: 100%;
}

.waves-block {
  position: absolute;
  width: 500%;
  height: 500%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.waves-block .waves {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(178, 163, 214, 0.2);
  opacity: 0;
  border-radius: 50%;
  -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">
    <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>
  </div>


</section>

答案 1 :(得分：0)

尝试将“ vw”单位用于宽度，将“ vh”单位用于高度属性，而不是“ px”。

相关问题
最新问题