HTML & CSS

ANIMATION – SIMPEL

Animer en kasse med HTML & CSS så den skifter farve





Animer en kasse med HTML & CSS så den flytter sig

Animer med glidende overgange

Animer med Transition og Transform: Hold musen over boksen(hover over the box) for at se forvandlingen

Animer en cirkel til at dreje rundt i en cirkel med Transform-origin

Lav indvendige skygger(måner) i regnbuens farver så de danner en cirkel – med hover effekt

Lav kreative firkanter der drejer rundt og laver forskellige mønstre

Lav kreative cirkler der drejer rundt og laver forskellige mønstre

Lav kreative cirkler der drejer rundt og laver forskellige mønstre

ANIMATION – MIDDEL

Lav en Sekskant ved hjælp af clip-path. Med HTML og CSS

Lav en Regnbue med halvcirkel borders og mask – mask: så man skjuler alt uden for hoved boksen.

Lav en Kolbe der tipper. Med HTML og CSS

Lav en sommerfugl . Med HTML og CSS

Lav regnbuefarvet spiralarme. Med HTML og CSS

Lav Newtons Cradle – Newtons Vugge

Animer en loader. Med HTML og CSS

Animer med Translate, 3d og Transform: Hold musen over boksen(hover over the box) for at se forvandlingen

front
back
right
left
top
bottom

Animer en 3D boks. Med HTML og CSS

ANIMATION – ADVANCED

Animer en 3D boks i et 3D rum der drejer rundt. Med HTML og CSS.

Animer firkanter. Kræver en del animation. Med HTML og CSS

OPGAVER

Lav popup vinduer – Med html og CSS

SCSS

Lav kreative firkanter der drejer rundt og laver forskellige mønstre, med vaiabler i SCSS

KOMMER SNART