Wie man eine Objektgröße bei der Größenanpassung des Fensters beibehält

Ich habe Kreise, die in einem Intervall in der Breite zunehmen und sobald sie eine Skala erreichen, verschwindet sie und beginnt erneut. Aber jedes Mal, wenn ich verblasse ich resize der Bildschirm oder zoom in and out der Kreis dreht sich wie ein oval oder ein wirklich stretched Objekt. Wie behalte ich den Kreis, einen Kreis, wenn der Bildschirm in der Größe geändert wird.Wie man eine Objektgröße bei der Größenanpassung des Fensters beibehält

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

Quelle

2017-03-19 Jagr

Statt width und height% in der Bereitstellung, in px verwenden. Ändern Sie folgende Zeile:

width:100%; 
height: 100%;

width:100px; 
height: 100px;

und versuchen Sie es erneut.

Erläuterung: Wenn Sie height und width in % verwenden, dann sind diese Eigenschaften abhängig von dem Behälter, dh window in Ihrem Fall, aber wenn man diese in px liefert dann bleibt es die gleiche, unabhängig von der Behälterhöhe Breite.

Quelle

2017-03-19 01:57:56

Wow kann ich fragen Sie zwei weitere Fragen? – Jagr

Wenn du denkst, dass ich dir helfen werde, dann kannst du :) –

Nun, ich habe buchstäblich nur mit Hilfe dieser Antwort Danke :) und zweitens, für meine Animation funktioniert es gut, aber wenn ich mag, öffnen Sie einen anderen Tab und bleiben Sie Da für etwa 1 min und komm zurück, starten alle meine Animationen wie zur gleichen Zeit und ich muss auffrischen, um es zu beheben. Wie kann ich das beheben? Code Stift Link ----> http://codepen.io/anon/pen/Zevrda – Jagr

Wenn Ihr Problem ist das, was ich denke, dass Sie diese verwenden können:

width:100vw; 
height: 100vh;

Ihre div wird die genaue Größe des Fensters erhalten

Quelle

2017-03-19 02:09:00 Aotoki

Wie man eine Objektgröße bei der Größenanpassung des Fensters beibehält

Antwort

Verwandte Themen