纯CSS实现粉红爱心动画

动画效果：

 

1、画一个爱心

<view class="heart"></view>

    .heart {
		position: relative;
		width: 50rpx;
		height: 50rpx;
		background-color: #EF686E;
		transform: rotate(-45deg);
	
	}



	.heart:before {
		content: "";
		position: absolute;
		top: -25rpx;
		left: 0;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: #EF686E;
	}

	.heart:after {
		content: "";
		position: absolute;
		top: 0px;
		left: 25rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: #EF686E;
		border-radius: 50%;
	}

2、让爱心动起来

<view class="heart heart1"></view>

    @keyframes up {
		0% {
			top: 500rpx;
		}

		100% {
			top: 0;
		}
	}

	@keyframes side {
		0% {
			margin-left: 0;
		}

		100% {
			margin-left: 150rpx;
		}
	}

	// 时间 透明度 大小 旋转角度 随意修改
	.heart1 {
		transform: rotate(300deg) scale(0.6);
		opacity: .7;
		animation: up 15s linear infinite, side 6s ease-in-out infinite alternate;
	}

3、多个爱心

<template>
	<view>
		<view class="heart heart1"></view>
		<view class="heart heart2"></view>
		<view class="heart heart3"></view>
		<view class="heart heart4"></view>
		<view class="heart heart5"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.heart {
		position: relative;
		width: 50rpx;
		height: 50rpx;
		background-color: #EF686E;
		transform: rotate(-45deg);
	}



	.heart:before {
		content: "";
		position: absolute;
		top: -25rpx;
		left: 0;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: #EF686E;
	}

	.heart:after {
		content: "";
		position: absolute;
		top: 0px;
		left: 25rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: #EF686E;
		border-radius: 50%;
	}

	@keyframes up {
		0% {
			top: 500rpx;
		}

		100% {
			top: 0;
		}
	}

	@keyframes side {
		0% {
			margin-left: 0;
		}

		100% {
			margin-left: 150rpx;
		}
	}

	// 时间 透明度 大小 旋转角度 随意修改
	.heart1 {
		transform: rotate(300deg) scale(0.6);
		opacity: .7;
		animation: up 15s linear infinite, side 6s ease-in-out infinite alternate;
	}

	.heart2 {
		left: 550rpx;
		transform: rotate(-30deg) scale(0.5);
		opacity: .5;
		animation: up 15s linear infinite, side 5s ease-in-out infinite alternate;
	}


	.heart3 {
		left: 200rpx;
		transform: rotate(300deg) scale(0.5);
		opacity: .4;
		animation: up 15s linear infinite, side 4s ease-in-out infinite alternate;
	}

	.heart4 {
		left: 350rpx;
		transform: rotate(-25deg) scale(0.6);
		opacity: .7;
		animation: up 18s linear infinite, side 2s ease-in-out infinite alternate;
	}


	.heart5 {
		left: 450rpx;
		transform: rotate(-30deg) scale(0.6);
		opacity: .6;
		animation: up 7s linear infinite, side 1s ease-in-out infinite alternate;
	}
</style>