<分区>
标签 css
<分区>
我有两个绝对定位元素。一个是点，另一个是只 Angular 方框 - 两者都是动画的。我希望点始终位于悬停时显示的 Angular 框的中心。但我遇到的问题是，当我将浏览器窗口变小时， Angular 框会稍微向左，而当我将它变大时， Angular 框会稍微向右。两个元素都有固定的宽度，并且都用百分比定位。我做错了什么？这是我所拥有的:
.wrapper {
position: relative;
width: 100%;
min-height: 500px;
background: blue;
}
.pulse {
position: absolute;
top: 41.8%;
left: 45.614%;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
cursor: pointer;
box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
animation: pulse 2s infinite;
}
.pulse:hover {
animation: none;
}
.pulse:hover+.corners {
visibility: visible;
transform: scale(2);
transition: all .6s;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
.corners {
position: absolute;
top: 43.65%;
left: 46.35%;
pointer-events: none;
visibility: hidden;
}
.corners:before {
display: block;
content: "";
width: 5px;
height: 5px;
position: absolute;
top: -10px;
left: -10px;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
}
.corners:after {
display: block;
content: "";
width: 5px;
height: 5px;
position: absolute;
top: -10px;
right: -10px;
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
}
.corners-inner:before {
display: block;
content: "";
width: 5px;
height: 5px;
position: absolute;
bottom: -10px;
left: -10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
}
.corners-inner:after {
display: block;
content: "";
width: 5px;
height: 5px;
position: absolute;
bottom: -10px;
right: -10px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
}<div class="wrapper">
<span class="pulse"></span>
<div class="corners"><span class="corners-inner"></span></div>
</div>最佳答案
.wrapper {
position: relative;
width: 100%;
min-height: 500px;
background: blue;
}
.pulse {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
cursor: pointer;
box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
animation: pulse 2s infinite;
}
.pulse:hover {
animation: none;
}
.pulse:hover+.corners {
visibility: visible;
transform: scale(2);
transition: all .6s;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
.corners {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 0;
height: 0;
pointer-events: none;
visibility: hidden;
}
.corners:before {
display: block;
content: "";
width: 5px;
height: 5px;
position: absolute;
top: -10px;
left: -10px;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
}
.corners:after {
display: block;
content: "";
width: 5px;
height: 5px;
position: absolute;
top: -10px;
right: -10px;
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
}
.corners-inner:before {
display: block;
content: "";
width: 5px;
height: 5px;
position: absolute;
bottom: -10px;
left: -10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
}
.corners-inner:after {
display: block;
content: "";
width: 5px;
height: 5px;
position: absolute;
bottom: -10px;
right: -10px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
}
关于css - 2 个绝对定位元素未按比例保持在一起的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52785820/
相关文章：
javascript - 当总宽度为动态时，在 jQuery 中正确定位 "reel"div
css - Webpack - 从 TypeScript 导入 Less 失败(css-loader)
html - Flexbox 换行在 Firefox 中无法正常工作
javascript - 找不到图像源 CSS/HTML 的链接
html - 隐藏 MS Edge 和 Firefox 中的滚动条？
javascript - Internet Explorer 8 不允许动态创建按钮
html - 我有一个 div，它使用了另一个 div 的所有特征，除了一个。使用 scss，我可以使用任何继承吗？
html - 我可以通过在带有 ancored 对象的单个页面上使用 id ="current"来突出显示事件菜单项吗？