Att göra en Pi tema lastning skärmen (6 / 7 steg)
Steg 6: Animera bilden
Nu när texten är rörliga, låt oss göra lastaren lite mer interaktivt genom att lägga till animationer till bilden. Eftersom det är en bild, kan inte jag ändra textfärgen. Men genom att minska opaciteten för bilden, jag kan göra det ganska grått.
Låt oss gå tillbaka till CSS-koden för taggen img och lägga till dessa rader.
-webkit-animering: Myanimation 0.5s oändligt;
animering: Myanimation 0.5s oändligt;
Den här egenskapen används för att lägga till animeringar på element i CSS. Du kanske har märkt att båda dessa linjer är i huvudsak samma undantag för de - webkit- prefix i första raden. Detta beror på att vissa webbläsare stöder endast - webkit- animationer (som Safari).
Nästa, skriv in följande rader med kod i style-tagg.
Myanimation {
från {opacitet: 1;}
till {opacitet: 0,5;}
}
Myanimation {
från {opacitet: 1;}
till {opacitet: 0,5;}
}
Detta alternativt minska och öka opaciteten för bilden, så att det ser svart och grått.
Slutligen kan du lägga till lite text under behållaren också.
< p style = "text-align: center;" > läsa in innehåll < /p >