Init HTML

Xem demo Tải về

HTML

Đầu tiên là cách thành phần của chậu cây.

<div class="pots">
	<img class="pot" src="plants/pot.png" alt="Pot">
	<img class="top-pot" src="plants/top-pot.png" alt="Top Pot">
	<img class="leaf leaf-1" src="plants/leaf-1.png" alt="Leaf 1">
	<img class="leaf leaf-2" src="plants/leaf-2.png" alt="Leaf 2">
	<img class="leaf leaf-3" src="plants/leaf-3.png" alt="Leaf 3">
	<img class="leaf leaf-4" src="plants/leaf-4.png" alt="Leaf 4">
	<img class="leaf leaf-5" src="plants/leaf-5.png" alt="Leaf 5">
	<img class="leaf leaf-6" src="plants/leaf-6.png" alt="Leaf 6">
	<img class="leaf leaf-7" src="plants/leaf-7.png" alt="Leaf 7">
</div>

CSS

CSS đơn giản như sau.

.pots {
	position: absolute;
	width: 90px;
	bottom: 20px;
	right: 10%;
}

.pots img {
	position: absolute;
}

.pots img.pot {
	bottom: 0;
	left: 0;
	z-index: 10;
}

.pots img.top-pot {
	left: 0;
	bottom: 77px;
	z-index: 1;
}

.pots img.leaf {
	bottom: 75px;
	max-width: none;
}

@keyframes spin-1 {
	50% {
		transform: rotate(1deg);
	}
}

@keyframes spin-2 {
	50% {
		transform: rotate(-2deg);
	}
}

@keyframes spin-3 {
	50% {
		transform: rotate(3deg);
	}
}

@keyframes spin-3 {
	50% {
		transform: rotate(-4deg);
	}
}

@keyframes spin-4 {
	50% {
		transform: rotate(5deg);
	}
}

@keyframes spin-5 {
	50% {
		transform: rotate(6deg);
	}
}

@keyframes spin-6 {
	50% {
		transform: rotate(-7deg);
	}
}

@keyframes spin-7 {
	50% {
		transform: rotate(8deg);
	}
}

.pots img.leaf-1 {
	width: 100px;
	right: 20%;
	z-index: 9;
	transform-origin: right bottom;
	animation: spin-1 5s linear infinite;
}

.pots img.leaf-2 {
	width: 100px;
	right: -20%;
	z-index: 8;
	transform-origin: bottom;
	animation: spin-2 5s linear infinite;
}

.pots img.leaf-3 {
	width: 150px;
	right: 65%;
	z-index: 7;
	transform-origin: right bottom;
	animation: spin-3 5s linear infinite;
}

.pots img.leaf-4 {
	width: 120px;
	right: -75%;
	z-index: 6;
	transform-origin: left bottom;
	animation: spin-4 5s linear infinite;
}

.pots img.leaf-5 {
	width: 160px;
	left: -45%;
	z-index: 5;
	transform-origin: bottom;
	animation: spin-5 5s linear infinite;
}

.pots img.leaf-6 {
	width: 140px;
	left: 45%;
	z-index: 4;
	transform-origin: left bottom;
	animation: spin-6 5s linear infinite;
}

.pots img.leaf-7 {
	width: 130px;
	right: 45%;
	z-index: 3;
	transform-origin: right bottom;
	animation: spin-7 5s linear infinite;
}

Chúc các bạn thành công!