Html
    Css
    Js

    
                        
     .heart {
	animation:heartbeat 1s infinite;
	-webkit-animation:heartbeat 1s infinite;
	/* Safari 和 Chrome */

        width:198px;
	height:198px;
	background:#f00;
	position:relative;
	filter:drop-shadow(0px 0px 20px rgb(255,20,20));
	transform:rotate(45deg);
	left:200px;
	top:50px;
}
.heart:before,.heart:after {
	content:"";
	position:absolute;
	width:200px;
	height:200px;
	background:#f00;
	border-radius:100px;
}
.heart:before {
	left:-100px;
}
.heart:after {
	left:0;
	top:-100px;
}
@keyframes heartbeat {
	0% {
	transform:rotate(45deg) scale(0.8,0.8);
	opacity:1;
}
25% {
	transform:rotate(45deg) scale(1,1);
	opacity:0.8;
}
100% {
	transform:rotate(45deg) scale(0.8,0.8);
	opacity:1;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3 实现类似心跳的动画效果

0