Tämä yksinkertainen esittely selittää, kuinka CSS-animaatioita käytetään mielenkiintoisten visuaalisten tehosteiden luomiseen.
Animoidun taustan lisääminen verkkosivustollesi tai sovellukseesi voi auttaa luomaan ainutlaatuisen, mielenkiintoisen suunnittelun. Luovat taustat voivat herättää tunteita ja parantaa käyttökokemusta.
On monia tapoja luoda animoitu tausta sovelluksellesi, mutta yksinkertainen HTML: n ja CSS: n yhdistelmä toimii erityisen hyvin. Katso tämä esimerkki, opi sen koodin toiminnasta ja katso live-demo lopullisesta animoidusta taustasta.
Luo HTML-rakenne
Luot sinisen taustan, jossa on kuplia, jotka kasvavat ja kelluvat ylöspäin. Tästä näet lopputuloksen Codepen.
Aloita luomalla a osio luokan kanssa kääre animaation sijoittamiseen.
Luo sitten 10 div: tä, jotka edustavat kuplia. Luo jokaisen divin sisällä jänne luokan kanssa piste. Sinä pystyt Opi nämä keskeiset HTML-tunnisteet 10 minuutissa jos olet uusi HTML: n käytössä.
<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>Tyyli CSS-koodilla
Voit luoda uskomattomia taustatehosteita käyttämällä vain HTML: ää. Mutta tässä projektissa käytät CSS: ää taustan tyyliin ja animoimiseen.
Aseta ensin marginaali ja täyte 0:ksi, jotta taustan ympärillä ei ole välilyöntejä.
* {
margin: 0;
padding: 0;
}Muotoile sitten yläosan tyyli käyttämällä kääreluokkaa. Tämän osion leveys ja korkeus on 100 %, jotta se täyttää koko sivun. Aseta sen taustaväri siniseksi ja anna sille absoluuttinen sijainti.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}Muotoile myös H1 absoluuttisella asennolla. Aseta se sivun keskelle asettamalla sen vasemman yläkulman sijainti 50 %:iin. Siirrä sitten sitä ylös ja vasemmalle kääntämällä niin, että sen keskipiste on tarkalleen keskellä.
.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;
}Muotoile seuraavaksi pyöreitä div-elementtejä, jotka toimivat animoituina kuplina. Anna kullekin diville korkeus, leveys ja reunus. Suuri reunasäde varmistaa, että raja on ympyrä. Aseta myös animaation kesto käyttämällä CSS-animaatio-ominaisuutta.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}Muotoile pisteet 5 kuvapisteen korkeudella ja leveydellä. Anna pisteille reunasäde ja valkoinen tausta. Sijoita jokainen ehdottomasti lähelle sen yläosaa oikeaa yläkulmaa.
div.dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}Käytä seuraavaksi n: nnettä alavalitsinta sijoittaaksesi jokainen div eri asetuksilla. Voit nimetä animaation animoida; määrität sen myöhemmin @keyframes-komennolla.
Käyttää n-lapsi (2) käsittelemään ensimmäistä div ensimmäisestä lapsesta lähtien .kääre elementti on 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;
}
Voit antaa alemmille diveille korkeampia prosenttiosuuksia, jotta ne nousevat huipulle eri aikavälein.
.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;
}
Käytä @keyframes muuttaaksesi ja kiertääksesi ympyröitä ja pisteitä asteittain eri aikavälein. Seuraavassa koodissa pisteet pyörivät 70 astetta ja ympyrät 360 astetta. Tämä pyöritys luo kuplavaikutelman.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}Sinä pystyt Tee taustasta tyylikkäämpi käyttämällä CSS-kuvioita. Kuvioiden avulla voit luoda aaltoja, ruudukoita, lehtiä ja muita kuvioita, jotka auttavat sinua luomaan upeita animaatioita.
Voit animoida monia ominaisuuksia CSS: n avulla
Voit luoda erilaisia animaatioita CSS: n avulla. Näitä ovat taustavärin muuttaminen ja animaation suoritusajan viivästäminen.
Voit myös määrittää, kuinka usein animaatiota suoritetaan, jopa äärettömään. Voit myös määrittää suunnan, jonka animaation tulee liikkua: eteenpäin tai taaksepäin. Animaatioilla on hauska leikkiä, ja niiden avulla voit herättää sovelluksesi eloon.
