CSS3 da mashina harakati

Salom. Kundan kunga shu yerga maqola yozib CSS3 haqidagi bilimlarimni oshirib bormoqdaman. Bugun FERRARI mashinasini harakatini yasashga qaror qildim. Manimcha yomon chiqmadi.

Buning uchun bizga ko’p narsa talab qilinmaydi:
1. Ferrari mashinasi

2. G’ildirakni qirqilgan varianti

3. Harakatni hosil qiladigan orqa fon.

Endi CSS ni birinchi qismi, ya’ni obyektlarni joylashtirish

* {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: Arial;
}

body {
	background: #000 url(movecar-bg.jpg) 0 0 repeat-x;
}

.car {
	position: absolute;
	top: 520px;
	left: 100px;
	background: url(ferrari.png) 0 0 no-repeat;
	width: 345px;
	height: 80px;
}

.bl, .br {
	position: absolute;
	width: 39px;
	height: 39px;
	bottom: 0;
	background: url(b.png) 0 0 no-repeat;
	left: 44px;
}

.br {
	left: 200px;
}

Endi harakat qismiga o’tamiz

/*** ANIMATION ***/
@keyframes move-bg {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -700px 0;
	}
}

@keyframes move-car {
	0% {
		left: 100px;
	}
	90% {
		left: 700px;
	}
	100% {
		left: 0px;
	}
}

@keyframes rotate-b {
	0% {
		transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(359deg);
	}
}

.car,
.bl, .br,
body {
	animation-name: move-bg;
	animation-duration: 1s;
	animation-direction: normal;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: runing;
}

.bl, .br {
	animation-name: rotate-b;
	animation-duration: 0.5s;
}

.car {
	animation-name: move-car;
	animation-duration: 15s;
}


/*** FOR CHROME ***/
@-webkit-keyframes move-bg {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -700px 0;
	}
}

@-webkit-keyframes move-car {
	0% {
		left: 100px;
	}
	90% {
		left: 700px;
	}
	100% {
		left: 0px;
	}
}

@-webkit-keyframes rotate-b {
	0% {
		-webkit-transform: rotate(0deg);
	}
	
	100% {
		-webkit-transform: rotate(359deg);
	}
}

.car,
.bl, .br,
body {
	-webkit-animation-name: move-bg;
	-webkit-animation-duration: 1s;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: runing;
}

.bl, .br {
	-webkit-animation-name: rotate-b;
	-webkit-animation-duration: 0.5s;
}

.car {
	-webkit-animation-name: move-car;
	-webkit-animation-duration: 15s;
}

Manimcha bu CSS kodni tushingirishga unchalik hojat yo’q. Chunki deyarli hamma husisiyatlar haqida oldingiz maqolalarda yozilgan.

Natijani ko’rish (Firefox, Chrome)