我希望在调整浏览器大小时,我的弹跳箭头始终位于页面的左下角(就在页脚上方)。但是,当我调整浏览器大小时,箭头到处都是,并没有固定在页面的左下角。
#arrow {
position: absolute;
margin: auto;
top: 60;
bottom: 60;
left: -7;
right: -47 width: 40px;
height: 40px;
font-size: 40px;
line-height: 40px;
-webkit-animation: bounce 2s infinite ease-in-out;
}
@-webkit-keyframes bounce {
0%,
20%,
60%,
100% {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
}
}
<div id="arrow">click me <br>⬇</div>
fiddle 链接:https://jsfiddle.net/dave1231/9xLbpm4d/
最佳答案
你的意思是这样的? 据我了解,您需要在底部卡住一些东西
#arrow {
position: absolute;
margin: auto;
bottom: 4px;
font-size: 40px;
line-height: 40px;
-webkit-animation: bounce 2s infinite ease-in-out;
}
#pointer{
text-align:center;
}
@-webkit-keyframes bounce {
0%, 20%, 60%, 100% { -webkit-transform: translateY(0); }
40% { -webkit-transform: translateY(-20px); }
80% { -webkit-transform: translateY(-10px); }
}
<div id="arrow">click me
<div id="pointer">
⬇
</div>
</div>
关于html - Div 标签(动画箭头)没有停留在页面的左下角,就在我的页脚上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43820567/