css3实现跳动的爱心

CSS3实现跳动的爱心

.heart {
	width: 1em;
	height: 1em;
	background: red;
	position: relative;
	animation: pulse 1s infinite;
	}

.heart:before,.heart:after {
	content: "";
	position: absolute;
	width: inherit;
	height: inherit;
	background: inherit;
	border-radius: 50% 50% 0 0;
	}

.heart:before {
	top: -0.5em;
	transform: rotate(-45deg);
	}

.heart:after {
	left: -0.5em;
	transform: rotate(45deg);
	}

@keyframes pulse {
	0% {
		transform: scale(1);
		}
	25% {
		transform: scale(0.75);
		}
	50% {
		transform: scale(1);
		}
	75% {
		transform: scale(1.25);
		}
	100% {
		transform: scale(1);
		}
	}

以上代码实现了一个跳动的爱心。我们可以通过调整CSS属性来调节其大小、颜色、速度等等。