Question

我想知道如何在关键帧上设置分辨率大小，我的网站上有一个从顶部到底部的气泡。我已经为我的屏幕尺寸正确设置了它，但我注意到当屏幕尺寸改变时，气泡会更加下降并创建空白区域。这绝对是因为我把它设置为顶部：-500px和顶部：500px因此在每个屏幕尺寸中它将500px作为固定高度。我想设置顶部：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属性一起使用百分比作为单位而不是像素（因此，开始位置{{1} }，结束0%）。当然，元素的父元素必须为100%-height of element。

如果您希望对css关键帧有更多控制权，请将其设置为响应式，动态生成并重新生成它们，使用jQuery.Keyframes等工具

Answer 2

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

＆＃13;

.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;
    }
}  
}

＆＃13;

<div class="x4">

</div>

＆＃13;

css关键帧位置问题

2 个答案: