menu

Krylan | Krzysztof Koperkiewicz

Blog

Ilustracja posta 13

#09 Animowane tło w CSS

2017-04-16 / DSP2017 / Komentarze (0) / Wyświetleń:

Jakiś czas temu chwaliłem się, że w swoim projekcie udało mi się zrobić całkiem niezłą animację – ale nie ma co ukrywać, jest bardzo prosta. Są to po prostu trójkąty (na dwóch warstwach), które poruszają się w stronę lewego górnego rogu naszego okna.

W przypadku takiego tła trzeba jasno pilnować wzoru – bez tego animacji będzie brakowało "ciągłości" i zauważycie nagłe przeskakiwanie do swojego stanu początkowego. Kiedy mamy już przygotowany obrazek (w moim przypadku dwa, bo przewiduję dwie warstwy), możemy zabrać się za umieszczenie ich w folderze i pisanie styli. U mnie wygląda to tak:

.triangles{
	background-image:url('img/bg-triangle.png');
	background-repeat:repeat;
	-webkit-animation: 20s linear 0s normal none infinite animate2;
	-moz-animation: 20s linear 0s normal none infinite animate2;
	-ms-animation: 20s linear 0s normal none infinite animate2;
	-o-animation: 20s linear 0s normal none infinite animate2;
	animation: 20s linear 0s normal none infinite animate2;
}
.triangles2{
	position:absolute;
	left:0;right:0;
	top:0;bottom:0;
	background-image:url('img/bg-triangle2.png');
	background-repeat:repeat;
	-webkit-animation: 17s linear 0s normal none infinite animate;
	-moz-animation: 17s linear 0s normal none infinite animate;
	-ms-animation: 17s linear 0s normal none infinite animate;
	-o-animation: 17s linear 0s normal none infinite animate;
	animation: 17s linear 0s normal none infinite animate;
}

@-webkit-keyframes animate {
	from {background-position:0 0;}
	to {background-position: -400px -200px;}
}

@-webkit-keyframes animate2 {
	from {background-position:0 0;}
	to {background-position: -400px -200px;}
}


A tak wygląda na obecnym etapie główne menu gry:


Moim zdaniem się dobrze udało. A Wy co o tym myślicie? (wybaczcie za jakość i małą ilość klatek, ale nie chciałem, żeby ten gif za dużo ważył...)


Poprzedni post
#08 Przyciski udostępniania treści w sieciach społecznościowych – część 2
Następny post
#10 Inne projekty – Inku

Komentarze

Wygląda na to, że nic tu nie ma :<

Dodaj komentarz