文章/答案/技术大牛

发布

社区首页 >问答首页 >调整窗口大小的元素

问调整窗口大小的元素
EN

Stack Overflow用户

提问于 2020-06-11 21:20:59

回答 2查看 36关注 0票数 1

如果页面被调整大小，我们如何调整这个play按钮元素的大小？

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

当我调整屏幕大小时，我想要播放按钮调整大小。

这对我来说有点复杂，所以任何帮助都会很感激。

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

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

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-06-11 21:24:32

我以前见过你这个问题。已经写好答案了。请看一看，也许这会让你觉得很清楚。

在所有这些设置中，.video-play-button应该是position: absolute;

更新

重写.video-play-button的所有内部元素% scales。

现在主要的魔法就在这里。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

Stack Overflow用户

发布于 2020-06-11 21:27:17

尝试使用'vw‘单位的宽度和'vh’的高度属性，而不是'px‘。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62333750

复制

相似问题

问调整窗口大小的元素
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整窗口大小的元素EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整窗口大小的元素
EN