html - 在调整窗口大小时调整元素大小
问题描述
如果页面被调整大小,我们如何调整这个播放按钮元素的大小?
如果页面变小,我希望播放按钮变小...
我希望在调整屏幕大小时调整播放按钮的大小。
这对我来说有点复杂,所以任何帮助将不胜感激。
.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 当我调整屏幕宽度时,播放按钮的大小不会改变。
解决方案
我见过你这个问题的先前版本。并且已经写下了答案。请看一下,也许它会让你明白一些事情。
所有这些设置.video-play-button
应该是position: absolute;
更新
.video-play-button
重写了for % 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>
推荐阅读
- javascript - 更改 x 轴charts.js 中一个值的颜色
- laravel - 在laravel中保存模型后列不更新?
- unit-testing - 除一个测试类外,所有测试类均未运行 Visual Studio 2019
- python - 如何返回每个年度最大值所在的季节?
- sql - 如何复制目标表中不存在的记录
- c++ - 将数组的内容打印到 .txt 文件中
- reactjs - 创建反应文件夹的npx安装错误
- laravel - 如何在 Laravel Eloquent 中防止重复?
- angular - 如何在 Angular 2+ 中使用 Vimeo API
- javascript - 量角器扫描源代码从数组中寻找任何元素 - 就像 Ruby 循环一样