css关键帧位置问题

Question

我想知道如何设置关键帧的分辨率大小，我的网站上有一个从上到下的气泡。我已经为我的屏幕尺寸正确设置了它，但我注意到当屏幕尺寸发生变化时，气泡会向下更多并创建空白空间。这绝对是因为我将它设置为 top:-500px 和 top:500px 所以在每个屏幕尺寸中它都采用 500px 作为固定高度。我想以这样的方式设置 top:500px ，只要大小发生变化，它就应该占据屏幕高度并且应该停在底部。 我尝试了一些代码但没有成功，请您检查一下：

.x4 {
    left: 1025px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
    width:315px;
  height:315px;
    -webkit-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
      background-image: url(http://dubaiconfident.com/confi-logo/grey1-bubble.png);
}

@-webkit-keyframes moveclouds {
    0% {
        top: -500px;
    }
   100% {
        top: 500px;
    }
} 

Answer 1

使用带有position:fixed 和top 属性的移动元素，以百分比 作为单位而不是像素（因此，开始位置0%，结束100%-height of element ) .当然，您的元素的父级必须是 body。

---

如果您想更好地控制 css 关键帧，请将它们设置为响应式、动态生成和重新生成它们，请使用类似 jQuery.Keyframes 的工具

Answer 2

尝试以下代码并使用media query 使其在其他屏幕分辨率下正常工作，您可以使用vh (viewport height) 或% (percentage) 设置该气泡的着陆或停止。

.x4 {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
    left:calc(100% - 75%);
    -webkit-animation: moveclouds 5s linear forwards;
    -moz-animation: moveclouds 5s;
    -o-animation: moveclouds 5s;
      background-image: url(http://dubaiconfident.com/confi-logo/grey1-bubble.png);
      background-size:100% 100%;
      background-repeat:no-repeat;
      position:relative;
      width:320px;
      height:320px;
}

@-webkit-keyframes moveclouds {
    0%{
        top: -50vh;
    }
   100% {
        top: 30vh;
    }
} 

@media screen and (max-width: 480px){
.x4 {
    left:calc(100% - 70%);
      width:200px;
      height:200px;
}

@-webkit-keyframes moveclouds {
    0%{
        top: -50vh;
    }
   100% {
        top: 30vh;
    }
}  
}

<div class="x4">

</div>