In deze eenvoudige demo wordt uitgelegd hoe u CSS-animaties kunt gebruiken voor interessante visuele effecten.
Het toevoegen van een geanimeerde achtergrond aan uw website of applicatie kan bijdragen aan een uniek, interessant ontwerp. Creatieve achtergronden kunnen emoties oproepen en de gebruikerservaring verbeteren.
Er zijn veel manieren om een geanimeerde achtergrond voor uw toepassing te maken, maar een eenvoudige combinatie van gewone HTML en CSS werkt bijzonder goed. Bekijk dit voorbeeld, leer hoe de code werkt en bekijk een live demo van de uiteindelijke geanimeerde achtergrond.
Maak de HTML-structuur
Je gaat een blauwe achtergrond creëren met bubbels die groeien en naar boven zweven. Hierop kunt u het eindresultaat zien Codepen.
Begin met het maken van een sectie met de klas wikkel om de animatie te huisvesten.
Maak vervolgens 10 div's die de bubbels vertegenwoordigen. Maak binnen elke div een bereik met de klas punt. Jij kan Leer deze essentiële HTML-tags in 10 minuten als je nieuw bent bij HTML.
<body>
<sectionclass="wrapper">
<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
section>
body>Stijl met CSS-code
Je kunt ongelooflijk creëren achtergrondeffecten met alleen HTML. Maar voor dit project gebruik je CSS om de achtergrond te stylen en te animeren.
Stel eerst de marge en opvulling in op 0 om ervoor te zorgen dat er geen spaties rond de achtergrond aanwezig zijn.
* {
margin: 0;
padding: 0;
}Stijl vervolgens de bovenliggende sectie met behulp van de wrapper-klasse. Deze sectie heeft een breedte en hoogte van 100% om de hele pagina te vullen. Stel de achtergrondkleur in als blauwtint en geef deze een absolute positie.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}Style de H1 ook met een absolute positie. Om het in het midden van de pagina te plaatsen, begint u door de positie linksboven in te stellen op 50%. Gebruik vervolgens vertalen om het naar boven en naar links te verplaatsen, zodat het midden precies in het midden ligt.
.wrapperh1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}Stijl vervolgens de divs, die cirkelvormig zijn en als geanimeerde bubbels fungeren. Geef elke div een hoogte, breedte en rand. De grote randradius zorgt ervoor dat de rand een cirkel is. Stel ook een animatieduur in met behulp van de CSS-animatie-eigenschap.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}Stijl de stippen met een hoogte en breedte van 5px. Geef de stippen een randradius en een witte achtergrond. Plaats ze allemaal absoluut, dichtbij de rechterbovenhoek van de bovenliggende div.
div.dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}Gebruik vervolgens de nde-kind-selector om elke div met verschillende instellingen te positioneren. Je kunt de animatie een naam geven animeren; je definieert het later met @keyframes.
Gebruik zoveelste kind (2) om de eerste aan te pakken div sinds het eerste kind van de .wikkel element is de h1.
.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3slinearinfinite;
}.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}
Je kunt de lagere divs hogere percentages geven, zodat ze met verschillende tussenpozen naar de top stijgen.
.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}
Gebruik @keyframes om de cirkels en punten geleidelijk met verschillende intervallen te veranderen en te roteren. In de volgende code draaien de punten 70 graden en de cirkels 360 graden. Deze rotatie creëert het bubbeleffect.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}Jij kan maak achtergronden stijlvoller met behulp van CSS-patronen. Met patronen kunt u golven, rasters, bladeren en andere patronen maken waarmee u geweldige animaties kunt maken.
U kunt veel eigenschappen animeren met behulp van CSS
Met CSS kun je verschillende soorten animaties maken. Deze omvatten het wijzigen van de achtergrondkleur en het vertragen van de looptijd van een animatie.
Ook kun je instellen hoe vaak een animatie moet worden uitgevoerd, zelfs tot in het oneindige. Je kunt ook instellen in welke richting de animatie moet bewegen: vooruit of achteruit. Het is leuk om met animaties te spelen en je kunt ze gebruiken om je applicaties tot leven te brengen.
