如何使与css/jquery响应绝对定位元素

我有一个背景图像的div标签，具有css动画，当页面加载时：两个边框将从div标签的中心打开，然后出现背景图像过了一秒钟后，边框动画结束。这两个边界的立场是绝对的。我遇到了一个问题，当我缩小浏览器时，背景图像会缩小（这是我想要的），但两个边框保持在同一位置。当浏览器向上或向下缩放时，我希望两个边框可以改变位置，以便背景图像div保持在它们之间。无论如何用CSS或jQuery做到这一点？这里是什么，我有一个想法rought：如何使与css/jquery响应绝对定位元素

.background-img { 
 
    width: 10px; 
 
    margin: 0 auto; 
 
    opacity: 0; 
 
    animation-name: fading-in; 
 
    animation-delay: 2s; 
 
    animation-duration: 1s; 
 
    animation-fill-mode: forwards; 
 
} 
 
.borders { 
 
\t position: absolute; 
 
\t left: 50%; 
 
\t width: 8px; 
 
\t background-color: blue; 
 
\t height: 50px; 
 
\t border-radius: 4px; 
 
} 
 

 
.left-vertical-border { 
 
\t animation-name:move-left; 
 
\t animation-duration: 2s; 
 
\t animation-timing-function: ease-in; 
 
\t animation-fill-mode: forwards;  
 

 
} 
 

 
.right-vertical-border { 
 
\t top: 8px; 
 
\t animation-name:move-right; 
 
\t animation-duration: 2s; 
 
\t animation-timing-function: ease-in; 
 
\t animation-fill-mode: forwards; 
 
} 
 

 
@keyframes move-left { 
 
\t from{transform: translateX(0px);} 
 
\t to{transform: translateX(-100px);} 
 
} 
 

 
@keyframes move-right { 
 
\t from{transform: translateX(0px);} 
 
\t to{transform: translateX(100px);} 
 
} 
 

 
@keyframes fading-in { 
 
\t from{opacity:0;} 
 
\t to{opacity:1;} 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> \t 
 
\t \t <title>Responsive Absolute Positioning using css/jquery</title> \t \t 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="left-vertical-border borders"></div> 
 
\t \t <div class="background-img">fake bg image</div> 
 
\t \t <div class="right-vertical-border borders"></div> 
 
\t </body> 
 
</html>

来源

2016-05-20 Yi Ren

使用EM而不是PX，甚至如果你没有得到所需的效果，然后使用媒体查询.. –

我建议你尝试一种不同的方法。采取一个div，使其宽度（或最大宽度）从0到100％动画化。您可以将边框保留为2个跨度或伪元素。然后，使用transition-delay，可以在宽度动画完成后淡入div内的图像。 –

要使用绝对位置。父div必须具有相对的财产位置。在你的CSS我没有看到相对位置。在这种情况下，它可能会给问题

来源

2016-05-20 06:57:47 Xander

如何使与css/jquery响应绝对定位元素

回答

相关问题