Html
    Css
    Js

    
                        
body {
	background:black;
}
.heart {
	margin:100px auto;
	width:200px;
	height:200px;
	/* border:1px solid #0094ff;
	*/
		position:relative;
	animation-name:shake;
	animation-duration:.5s;
	animation-iteration-count:infinite;
}
.heart div {
	/* border:1px solid #0094ff;
	*/
		width:100%;
	height:100%;
	position:absolute;
	background:red;
	animation-name:shadow;
	animation-duration:.5s;
	animation-iteration-count:infinite;
}
.topLeft,.topRight {
	border-radius:100px 100px 0 0;
}
.topLeft {
	transform:translate(-50px,0) rotate(-45deg);
}
.topRight {
	transform:translate(50px,0) rotate(45deg);
}
.bottom {
	transform:translate(0,64px) rotate(45deg) scale(.9,.9);
}
/* 定义动画 */

@keyframes shake {
	from {
	transform:scale(.9,.9);
}
to {
	transform:scale(1.1,1.1);
}
}@keyframes shadow {
	from {
	}to {
	box-shadow:0px 0px 50px red;
}
}

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

心形动画代码

0