css进阶二 （粉粉的爱心动起来)

上一篇做的爱心给女朋友看她说太僵硬了，怎么办？？？

介绍几个api

animation-name(动画名字) animation-duration(动画时长) animation-iteration-count(动画播放次数)

让爱心动起来

老规矩先整两个div <div class='back'><div class='love'></div></div>

把进阶一爱心的代码copy过来再加个背景

.back{
		position: fixed;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		top:0;
		left: 0;
		background-color: white;
		animation-name: backdiv;
		animation-duration: 1s;
		animation-iteration-count: infinite;
	}
	.heart{
		width: 200px;
		height: 200px;
		background-color: pink;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		transform: rotate(-45deg);
		animation-name: love;
		animation-duration: 1s;
		animation-iteration-count: infinite;
	}
	.heart:after{
		content: "";
		width: 200px;
		height: 200px;
		background-color: pink;
		border-radius: 50%;
		position: absolute;
		top: 0px;
		left: 100px;
	}
	.heart:before{
		content:"";
		background-color: pink;
		width:200px;
		height: 200px;
		border-radius: 50%;
		position: absolute;
		top: -100px;
		left: 0px;
	}

这个时候就长这样

在上面我设置了animation-name 动画的名字 接下来就是加个关键帧让他扑哧扑哧的动起来

    	@keyframes backdiv{
		50%{
			background-color:pink;
		}
	}
	@keyframes love {
		0% {
			transform: scale(1) rotate(-45deg);
		}
		50% {
			transform: scale(0.5) rotate(-45deg);
		}
	}

也不知道这样女朋友满意不，要是你满意给个赞呗！！！