图片自动放大缩小,模拟”心脏跳动”

/*给这个按钮创建一个动名名称:my_chage2
@-webkit-keyframes 'my_chage2' {
	from {
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		transform:scale(1,1);
	}
	50% {
		-moz-transform:scale(1.15,1.15);
		-webkit-transform:scale(1.15,1.15);
		-o-transform:scale(1.15,1.15);
		transform:scale(1.15,1.15);
	}
	to {
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		transform:scale(1,1);
	}
}

前半段时间图片从1扩大到1.15倍

后半段时间图片从1.15倍缩小至1倍

往复循环,实现图片不断扩大缩小,有点类似于“心脏跳动”

#hart_2,#hart_3 {
	/*调用animation属性,从而让按钮在载入页面时就具有动画效果*/
	-webkit-animation-name: "my_chage2"; /*动画名称,需要跟@keyframes定义的名称一致*/
	-webkit-animation-duration: 2s;/*动画持续的时间长*/
	-webkit-animation-iteration-count: infinite;/*动画循环播放的次数*/
}

猜你喜欢

转载自hbiao68.iteye.com/blog/2323044