Maak geanimeerde CSS-kunst

Jan 26, 2026

Procedures

(Beeldkrediet: Tiffany Choong)

CSS-afbeeldingen maken is een leuke manier om je vaardigheden te oefenen en een nette stuk kunstwerk te creëren. Het is een mooie pauze van de gebruikelijke dagelijkse styling van webcomponenten. Alles wat u moet beginnen is een leeg document en een CSS-bestand; We raden aan SASS te gebruiken, waarmee u uw stijlen kunt hergebruiken en Simpler Selectors wilt schrijven (zie onze gids naar Wat is sass? Voor meer informatie over deze preprocessor).

We beginnen met een aantal toptips voor het beheersen van CSS-kunst, laat u zien hoe u deze geanimeerde ballon Pikachu opnieuw kunt recreëren met alleen CSS (zorg ervoor dat u uw bestanden veilig bewaart cloud opslag

Ontdek voor meer inspiratie onze afronding van geweldig CSS-animatievoorbeelden Na iets eenvoudiger? Begin met leren Hoe een ijslolly te maken met CSS

Of, als u een nieuwe site start, sloot de complexiteit met een briljant website bouwer en zorg ervoor dat je je krijgt web hosting Zoek op.

Verminder het ontwerp naar eenvoudige vormen

Bij het maken van CSS-kunst kan het helpen om naar een aantal referentiebeelden te kijken naar inspiratie en vervolgens een vereenvoudigde cartoonvariatie te creëren terwijl u langs gaat, het onderwerp voorstellen met primitieve vormen, wat beter wordt CSS-vormen

Gebruik een lichte achtergrond om te helpen met positionering

Bij overlappende vormen van vergelijkbare kleuren is het moeilijk om te zien waar ze worden geplaatst of waar ze eruit zien. Het is handig om de vorm te hebben die je aan het werk werkt door het veranderen van de Achtergrond kleur naar iets helders en vrolijk, zoals Magenta. Hiermee kunt u eenvoudig de exacte positie en vorm van uw element zien.

Gebruik vloeistofmaten

Als het gaat om het definiëren van een PX-waarde voor eigenschappen, raden we aan de REM-eenheid te gebruiken. In het geval u besluit dat u wilt dat uw algehele stuk groter of kleiner is, door REM-eenheden te gebruiken, hoeft u alleen de basis te wijzigen html {font-size: ... px} in je sass om het hele kunstwerk omhoog of omlaag te schalen.

Bij het definiëren van de hoogten en breedtes van kinderelementen die een relatieve maatgevend moeten zijn voor de ouder, worden percentages van pas gekomen. Omdat deze waarden altijd ten opzichte van hun ouder zijn, moeten ze ook schalen met de HTML-lettergrootte

Generate CSS is een op maat gemaakte conferentie die door Creative Bloq, net en webontwerper wordt gebracht. Klik om uw vroege vogelticket te boeken! (Beeldkrediet: Getty / Future)

01. Begin met containers

Een wikkelcontainer om de stukjes van de kunstwerken vast te houden, is een goede plek om te beginnen. In de container kunnen we drie binnencontainers plaatsen - het hoofd, het lichaam en de ballonnen.

 & lt; div class = "container" & GT;
& lt; div class = "head" & gt; & lt; / div & gt;
& lt; div class = "lichaam" & gt; & lt; / div & gt;
& lt; div class = "ballonnen" & gt; & lt; / div & gt;
& lt; / div & gt;

De container moet meestal zijn Positie: familielid om andere elementen toe te staan relatief binnen te worden geplaatst met behulp van Positie: absoluut en hebben een goed gedefinieerde hoogte en breedte, anders wordt het positioneren van kinderelementen moeilijk.

Voeg in uw stijlen uw basiskleuren toe als SASS-variabelen voor herbruikbaarheid. De sass verlichten() en donkerder () Functies maken tinten en tinten van uw kleuren, die kunnen worden gebruikt als hoogtepunten of schaduwen voor uw karakter.

02. Stijl het hoofd

Met de structuur uitgereikt, laten we eerst het hoofd instellen. In dit geval maakt het hoofd een mooi centrumpunt voor het kunstwerk, dus in plaats van zijn positie in absoluut te stellen, kan het worden ingesteld op familielid. Hierdoor kan de houder een stabiel element erin hebben, waardoor de andere zwevende absolute elementen een ankerpunt en dus meer controle over hun positie meer controle geven.

De gezichtsfuncties hebben een container nodig voor positionering, dus maak een & LT; DIV & GT; Binnen de hoofdcontainer voor de gele vorm met een breedte, hoogte en achtergrondkleur - laten we nu deze rechthoek meer uitzien als een hoofdvorm. Een van de meest voorkomende en nuttige eigenschappen in CSS-kunst is de grensradius Eigenschap, die de curve van de hoeken van de X of Y of Y of Y of Y of de box verandert en kan worden gebruikt om meer organische vormen te creëren.

Met behulp van deze techniek met een REM- en PERCENTAGE COMBO, kunt u blob-achtige vormen maken in plaats van alleen gewoon ellipsen, welke schaal van nature met de HTML {font-size: ... px}

. Face {
Border-Top-Left-Radius: 50% 4.5rem;
Border-Tow-Right-Radius: 50% 4.5rem;
Border-Bottom-Left-Radius: 50% 3rem;
Border-Bottom-Right-Radius: 50% 3rem;

}

Na het perfectioneren van het hoofd grensradius , plaats de rest van de gezichtskenmerken als kindelementen van het hoofd, zoals de ogen, wangen, neus en oren. Zoals het hoofd, de grensradius Trick zal sindsdien handig komen Border-Radius: 50% lijkt misschien niet aantrekkelijk.

03. Ga verder met het lichaam

Een lichaam & LT; DIV & GT; kan binnen het lichaamscontainer achter het hoofd worden geplaatst en gevormd met hetzelfde grensradius techniek, evenals de armen, benen en staart. Om een goede overlapping toe te staan, moet het eigenlijke lichaam zijn eigen element zijn, omdat bepaalde innerlijke elementen zoals de rugstrepen moeten worden afgesneden overloop verborgen Om het lichaam meer diepte te geven, de Transformeren: SKEW () eigendom kan het lichaam iets enigszins maken.

De bliksemboutstaart kan worden gebouwd met behulp van drie afzonderlijke rechthoeken in plaats van deze vorm van het ene element te vormen. De rechthoeken kunnen worden gedraaid en gepositioneerd over de bovenkant van elkaar om een bout te vormen. De armen en benen kunnen de donkere primaire kleur gebruiken die we hebben gemaakt met Sass donkerder () dus opvallen ze.

04. Voeg ballonnen toe

Nu de elektrische muis is voltooid, laten we ballonnen aan zijn rug binden. Voeg wat toe & LT; DIV & GT; s met gedeelde stijlen met een kindstring & LT; DIV & GT; en positioneer ze gebundeld boven het hoofd. De string is onzichtbaar behalve een grens-links , welke helpen het er meer string-achtig uit te laten zien.

Om de taille rond de taille van het personage te binden, een & LT; DIV & GT; kan in het lichaam worden geplaatst om een goede positionering mogelijk te maken. De string heeft een lichte curve nodig om te verschijnen alsof het rond het lichaam is gebonden, dus het kan een kleine lengte hebben, grensbodem en een grensbodem linker- en rechterradius, die een dunne gebogen lijn maakt:

 .String {
Hoogte: 1REM;
Breedte: 9rem;
grensrecht: vaste 1px $ wit;
Grens-links: solide 1px $ wit;
grensbodem: vaste 1px $ wit;
Border-Bottom-Left-Radius: 50% 1REM;
Border-Bottom-Right-Radius: 50% 1REM;
}

05. Animeer de CSS

We kunnen het karakterleven geven door toe te voegen @KeyFRAMES animaties. De armen, benen, oren en staart kunnen worden geanimeerd met Transformeren: Roteren () Zorg ervoor dat de transformatie-oorsprong is ingesteld op het 'gewricht' (d.w.z. topcentrum voor een been) en de rotatie aan te passen. Dit animatietype kan verschillende keren in een Sass Mixin worden gebruikt:

 @mixin animaterotate ($ naam, $ start, $ einde) {
@KeyFRAMES # {$ NAAM} {
0%, 100% {transformatie: Roteren (# {$ Start} deg)}
50% {transformatie: roteren (# {$ end} deg)}

}

Eindelijk, het toevoegen van een langzame 5s Transformeren: Translatey () Keyframe-animatie zal het personage op en neer animeren alsof het drijft. Voor een vleugje realisme, een knipperende animatie met behulp van Transformeren: Schaal (0.1) Eigenschap kan worden gebruikt om het te laten verschijnen alsof de ogen sluiten.

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine netto- Koop Issue 283 of inschrijven

Lees verder:

5 dingen die je nooit hebt geweten van CSS
Voeg SVG-filters toe met CSS
Hoe de slimme tekst-effecten met CSS codet

Maak geanimeerde CSS-kunst

01. Begin met containers

02. Stijl het hoofd

03. Ga verder met het lichaam

04. Voeg ballonnen toe

05. Animeer de CSS

Procedures - Meest populaire artikelen

Hoe kan het fotoshop iemand in een afbeelding

Niveau op uw VR-kunst

Hoe een kleurrijke zombie te schilderen

Maak een portaal-effect in Maya

Inleiding tot bruikbaarheidstests

Maak sensationele zonsondergangen in Photoshop

Hoe een prachtig aquarel landschap te maken

Hoe een geanimeerde held te ontwerpen

Categorieën