如何在调整窗口大小时保持对象大小相同

我有一个在间隔内宽度增加的圆，一旦达到一个比例，它就会消失并重新开始。但是每当我褪色屏幕或zoom in and out时，圆圈就会变为像oval或真的stretched对象。当屏幕被调整大小时，我如何保持圆圈，一个圆圈。如何在调整窗口大小时保持对象大小相同

的Html

<div id="container"> 
    <div id="name-div"> 
     <h1 id="name">Open Touch</h1> 
    </div> 
    <ul class="bubbles"> 
     <li id="firstCircle"></li> 
     <li id="secondCircle"></li> 
     <li id="thirdCircle"></li> 
     <li id="fourthCircle"></li> 
     <li id="fifthCircle"></li> 
     <li id="sixthCircle"></li> 
    </ul> 
</div>

的CSS

.bubbles { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 0; 
    transform: translateZ(0); 
    -webkit-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -o-transform: translateZ(0); 
} 

.bubbles li { 
    position: absolute; 
    list-style: none; 
    display: block; 
    border-radius: 100%; 
    -ms-animation: fadeAndScale 33s ease-in infinite; 
    -webkit-animation: fadeAndScale 33s ease-in infinite; 
    -moz-animation: fadeAndScale 33s ease-in infinite; 
    -o-animation: fadeAndScale 33s ease-in infinite; 
    animation: fadeAndScale 33s ease-in infinite; 
    transition-timing-function: linear; 
} 
/* The first Circle animation------------------------------------------------------------------------------------------------ */ 
.bubbles li:nth-child(1) { 
    width: 9%; 
    height: 20%; 
    top: 20%; 
    left: 20%; 
    background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%); 
    animation-name: firstCircle; 
} 
/* Mozilla First Circle Animation */ 
@-moz-keyframes firstCircle { 
    0% { 
     z-index: 100; 
     -moz-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -moz-transform: scale(200); 
    } 
} 
/* Webkit First Circle Animation */ 
@-webkit-keyframes firstCircle { 
    0% { 
     z-index: 100; 
     -webkit-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -webkit-transform: scale(200); 
    } 
} 
@-ms-keyframes firstCircle { 
    0% { 
     z-index: 100; 
     -ms-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -ms-transform: scale(200); 
    } 
} 
@-o-keyframes firstCircle { 
    0% { 
     z-index: 100; 
     -ms-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -ms-transform: scale(200); 
    } 
} 
/* End first circle animation -------------------------------------------------------------------------------------- */\ 

/* Begin Second Circle Animation ------------------------------------------------------------------------------------ */ 
.bubbles li:nth-child(2) { 
    width: 9%; 
    height: 20%; 
    position: absolute; 
    left: 40%; 
    top: 40%; 
    animation-name: secondAnimation; 
} 
/* Webkit Second Animation */ 
@-webkit-keyframes secondAnimation { 
    0% { 
     z-index: 100; 
     -webkit-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -webkit-transform: scale(200); 
    } 
} 
/* Mozilla Second Animation */ 
@-moz-keyframes secondAnimation { 
    0% { 
     z-index: 100; 
     -moz-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -moz-transform: scale(200); 
    } 
} 
/* Ms Second Animation */ 
@-ms-keyframes secondAnimation { 
    0% { 
     z-index: 100; 
     -ms-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -ms-transform: scale(200); 
    } 
} 
@-o-keyframes secondAnimation { 
    0% { 
     z-index: 100; 
     -ms-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -ms-transform: scale(200); 
    } 
} 
/* End of Second Circle ------------------------------------------------------------------------------------- */ 

/*Begin of Third Circle ----------------------------------------------------------------------------------- */ 
.bubbles li:nth-child(3) { 
    width: 9%; 
    height: 20%; 
    position: absolute; 
    left: 60%; 
    top: 10%; 
    animation-name: thirdAnimation; 
} 
/* Webkit Third Animation */ 
@-webkit-keyframes thirdAnimation { 
    0% { 
     z-index: 100; 
     -webkit-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -webkit-transform: scale(200); 
    } 
} 
/* Mozilla Third Animation */ 
@-moz-keyframes thirdAnimation { 
    0% { 
     z-index: 100; 
     -moz-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -moz-transform: scale(200); 
    } 
} 
/* MS Third Animation */ 
@-ms-keyframes thirdAnimation { 
    0% { 
     z-index: 100; 
     -ms-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -ms-transform: scale(200); 
    } 
} 
@-o-keyframes thirdAnimation { 
    0% { 
     z-index: 100; 
     -ms-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -ms-transform: scale(200); 
    } 
} 
/* End of the Third Circle --------------------------------------------------------------------------------------------------------- */ 

/* Begin of Fourth Circle Animation ----------------------------------------------------------------------------------------------- */ 
.bubbles li:nth-child(4) { 
    width: 9%; 
    height: 20%; 
    position: absolute; 
    left: 10%; 
    top: 60%; 
    animation-name: fourthAnimation; 
} 
/* Webkit Fourth Animation */ 
@-webkit-keyframes fourthAnimation { 
    0% { 
     z-index: 100; 
     -webkit-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -webkit-transform: scale(200); 
    } 
} 
/* Mozilla Fourth Animation */ 
@-moz-keyframes fourthAnimation { 
    0% { 
     z-index: 100; 
     -moz-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -moz-transform: scale(200); 
    } 
} 
/* MS Fourth Animation */ 
@-ms-keyframes fourthAnimation { 
    0% { 
     z-index: 100; 
     -ms-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -ms-transform: scale(200); 
    } 
} 
@-o-keyframes fourthAnimation { 
    0% { 
     z-index: 100; 
     -ms-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -ms-transform: scale(200); 
    } 
} 
/* END of Fourth Animation ------------------------------------------------------------------------------------------------ */ 

/* Start of Fifth Animation -------------------------------------------------------------------------------------------------- */ 
.bubbles li:nth-child(5) { 
    width: 9%; 
    height: 20%; 
    position: absolute; 
    left: 50%; 
    top: 10%; 
    animation-name: fifthAnimation; 
} 
/* Webki Fifth Animation */ 
@-webkit-keyframes fifthAnimation { 
    0% { 
     z-index: 100; 
     -webkit-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -webkit-transform: scale(200); 
    } 
} 
@-moz-keyframes fifthAnimation { 
    0% { 
     z-index: 100; 
     -moz-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -moz-transform: scale(200); 
    } 
} 
@-ms-keyframes fifthAnimation { 
    0% { 
     z-index: 100; 
     -ms-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -ms-transform: scale(200); 
    } 
} 
@-o-keyframes fifthAnimation { 
    0% { 
     z-index: 100; 
     -ms-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -ms-transform: scale(200); 
    } 
} 
/* End of the Fith Circle ----------------------------------------------------------------------------------------------------- */ 

/* Start of the Sixth Circle ------------------------------------------------------------------------------------------------- */ 
.bubbles li:nth-child(6) { 
    width: 9%; 
    height: 20%; 
    position: absolute; 
    left: 80%; 
    top: 60%; 
    animation-name: sixthAnimation; 
} 
/* Webkit sixth animation */ 
@-webkit-keyframes sixthAnimation { 
    0% { 
     z-index: 100; 
     -webkit-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -webkit-transform: scale(200); 
    } 
} 
/* Mozilla Sixth Animation */ 
@-moz-keyframes sixthAnimation { 
    0% { 
     z-index: 100; 
     -moz-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -moz-transform: scale(200); 
    } 
} 
/* MS Sixth Animation */ 
@-ms-keyframes sixthAnimation { 
    0% { 
     z-index: 100; 
     -ms-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -ms-transform: scale(200); 
    } 
} 
@-o-keyframes sixthAnimation { 
    0% { 
     z-index: 100; 
     -ms-transform: scale(0); 
    } 
    100% { 
     z-index: 0; 
     -ms-transform: scale(200); 
    } 
}

来源

2017-03-19 Jagr

而是在%提供width和height的，在px使用。更改以下行：

width:100%; 
height: 100%;

到

width:100px; 
height: 100px;

，然后再试一次。

说明：当您使用height和%width，那么这些属性都依赖于容器上，即window你的情况，但如果你在px提供这些那么它仍然是容器相同的高度，不论宽度。

来源

2017-03-19 01:57:56

哇，我可以问你两个问题的确切大小？ – Jagr

如果你认为我会帮助你，那么是的，你可以:) –

嗯，我真的只是固定在这个答案的帮助谢谢:)第二，对于我的动画，它工作正常，但是当我喜欢打开另一个标签并留下在那里等待1分钟，然后回来，所有的动画都是在同一时间开始的，我不得不刷新以解决问题。我如何解决这个问题。代码笔链接----> http://codepen.io/anon/pen/Zevrda – Jagr

如果你的问题是什么，我认为你可以使用这个：

width:100vw; 
height: 100vh;

你的div将得到窗口

来源

2017-03-19 02:09:00 Aotoki

如何在调整窗口大小时保持对象大小相同

回答

相关问题