Stap 6: De afbeelding animeren
Nu dat de tekst in beweging is, laten we de loader een beetje meer interactief maken door animaties aan de afbeelding toe te voegen. Aangezien het een afbeelding is, ik kan niet de tekstkleur wijzigen. Maar, door vermindering van de dekking van het beeld, ik kan het heel grijs.
We gaan terug naar de CSS-code voor de img -tag en voeg deze regels toe.
-webkit-animation: Myanimation 0.5s infinite; animation: Myanimation 0.5s infinite;
Deze eigenschap wordt gebruikt voor het toevoegen van animaties op elementen in CSS. Je hebt misschien gemerkt dat deze beide lijnen in wezen hetzelfde met uitzondering van zijn de - webkit- prefix in de eerste regel. Dit is omdat sommige browsers alleen ondersteunen - webkit- animaties (zoals Safari).
Typ vervolgens in de volgende coderegels in het style-element.
Myanimation { from {opacity:1;} to {opacity:0.5;} } Myanimation { from {opacity:1;} to {opacity:0.5;} } Dit zal ook verminderen en verhoging van de doorzichtigheid van de afbeelding om het blik zwart en grijs.
Tot slot kunt u sommige tekst onder de container zo goed.
<p style="text-align: center;">Loading Content</p>
