Question

我真的很感激下面的CSS有点帮助。我在www.thehomebird.com上实现了这个问题我遇到的问题是，如果我改变浏览器窗口的大小（水平方向），箭头会移动到那个大小，这意味着如果我使用不同的浏览器，它总是在错误的位置。在完美的世界中，我很乐意让它像我改变浏览器的大小一样，它始终保持在同一个地方。

点击后，它会像现在一样停下来并且消失。向上滚动时会再次显示。我试图找到一些网站，我看到它按照它应该的方式行事，但目前找不到东西我会在这里再次看到它时添加它，同时希望有人知道我想做什么并且可以帮助我。提前谢谢！

`/* Middle screen Arrow */


.scroll_down_button {
    color: rgb(255, 255, 255);
    display: inline-block;
    font: 400 20px/1 "Josefin Sans",sans-serif;
    margin: 0 auto;
    left: 50%;
    letter-spacing: 0.1em;
    opacity: 1;
    position: absolute;
    vertical-align:middle;
    text-decoration: none;
    top: 75%;
    transform: translate(0px, -50%);
    transition: opacity 1s ease 0s;
    z-index: 999;
    outline: none !important;
}

.click_able_arrow {
     animation: 3s ease 0s normal none infinite running sdb04;
     border-bottom: 2px solid rgb(255, 255, 255);
     border-left: 2px solid rgb(255, 255, 255);
     box-sizing: border-box;
     height: 24px;
     left: 50%;
     margin-left: -12px;
     position: absolute;
     vertical-align:middle;
     top: 75%;
     transform: rotate(-45deg);
     width: 24px;
}


 @-webkit-keyframes sdb04 {
 0% {
     -webkit-transform: rotate(-45deg) translate(0, 0);
 }
 20% {
     -webkit-transform: rotate(-45deg) translate(-10px, 10px);
 }
 40% {
     -webkit-transform: rotate(-45deg) translate(0, 0);
 }
}

@keyframes sdb04 {
0% {
    transform: rotate(-45deg) translate(0, 0);
}
20% {
    transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
    transform: rotate(-45deg) translate(0, 0);
}
}

Answer 1

如果我理解你的问题？在调整浏览器窗口大小时，箭头会改变它的位置？ ....可能首先想到的是你用

来定位它

left: 50%;

这意味着如果屏幕变大，它会移动，我通常会使用像

这样的东西

left: 50vw;

无论如何，

。

但如果您不希望它从固定位置移动，您是否尝试定义其位置

left: 200px;

而不是绝对

position: fixed;

这可能也有用吗？

left: 50%; 
position: fixed;

但我不确定......

Answer 2

我做了一些调整：

删除了vertical-align：middle; （在.scroll_down_button和.click_able_arrow两个部分中）

删除顶部：75％;在.click_able_arrow

并在.scroll_down_button

中添加了550px而不是75％

仍然不完美，但我想更好

/ *中画面箭头* /

.scroll_down_button {
color: rgb(255, 255, 255);
display: inline-block;
font: 400 20px/1 "Josefin Sans",sans-serif;
margin: 0 auto;
left: 50%;
letter-spacing: 0.1em;
opacity: 1;
position: absolute;
text-decoration: none;
top: 550px;
transform: translate(0px, -50%);
transition: opacity 1s ease 0s;
z-index: 999;
outline: none !important;
}

.click_able_arrow {
animation: 3s ease 0s normal none infinite running sdb04;
border-bottom: 2px solid rgb(255, 255, 255);
border-left: 2px solid rgb(255, 255, 255);
box-sizing: border-box;
height: 24px;
left: 50%;
margin-left: -12px;
position: absolute;
transform: rotate(-45deg);
width: 24px;
}

向下滚动箭头CSS

2 个答案: