Hiệu ứng trái tim đẹp đơn giản với HTML và CSS



Code mẫu hiệu ứng trái tim đẹp đơn giản với HTML và CSS

1. HTML

								

2. CSS

							body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #2c3e50
}

.box {
	width: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
}

.heart {
	position: relative;
	margin: auto;
	height: 170px;
	width: 200px;
	animation: animate 1s infinite;
}

.heart:before, .heart:after {
	content: '';
	position: absolute;
	background: #d63031;
	width: 100px;
	height: 160px;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}

.heart:before {
	left: 100px;
	transform: rotate(-45deg);
	transform-origin: 0 100%;
	box-shadow: 0 14px 28px rgba(0,0,0,0.25),
							0 10px 10px rgba(0,0,0,0.22);
}

.heart:after {
	left: 0;
	transform: rotate(45deg);
	transform-origin: 100% 100%;
}

@keyframes animate {
	0% {
		transform: scale(1);
	}
	30% {
		transform: scale(.8);
	}
	60% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}						

3. JAVASCRIPT

													

Nguồn của bạn : ‎Tran Anh Tuat‎ 

Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.