Html
    Css
    Js

    
                        
body {
	padding:40px 0;
	font-family:'bebas',sans-serif;
	background-color:#fff;
}
body .textcontainer {
	padding:40px 0;
	text-align:center;
}
body .particletext {
	text-align:center;
	font-size:48px;
	position:relative;
}
body .particletext.hearts > .particle {
	opacity:0;
	position:absolute;
	background-color:#cc2a5d;
	-webkit-animation:hearts 3s ease-in infinite;
	animation:hearts 3s ease-in infinite;
}
body .particletext.hearts > .particle:before,body .particletext.hearts > .particle:after {
	position:absolute;
	content:'';
	border-radius:100px;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#cc2a5d;
}
body .particletext.hearts > .particle:before {
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}
body .particletext.hearts > .particle:after {
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
@-webkit-keyframes hearts {
	0% {
	opacity:0;
	-webkit-transform:translate(0,0%) rotate(45deg);
	transform:translate(0,0%) rotate(45deg);
}
20% {
	opacity:0.8;
	-webkit-transform:translate(0,-20%) rotate(45deg);
	transform:translate(0,-20%) rotate(45deg);
}
100% {
	opacity:0;
	-webkit-transform:translate(0,-1000%) rotate(45deg);
	transform:translate(0,-1000%) rotate(45deg);
}
}@keyframes hearts {
	0% {
	opacity:0;
	-webkit-transform:translate(0,0%) rotate(45deg);
	transform:translate(0,0%) rotate(45deg);
}
20% {
	opacity:0.8;
	-webkit-transform:translate(0,-20%) rotate(45deg);
	transform:translate(0,-20%) rotate(45deg);
}
100% {
	opacity:0;
	-webkit-transform:translate(0,-1000%) rotate(45deg);
	transform:translate(0,-1000%) rotate(45deg);
}
}@keyframes heart {
	0% {
	transform:scale(0.8) rotate(45deg);
	opacity:0.8
}
50% {
	transform:scale(1) rotate(45deg);
	opacity:1
}
100% {
	transform:scale(0.8) rotate(45deg);
	opacity:0.8;
}
}.heart {
	width:50px;
	height:50px;
	background-color:#cc2a5d;
	position:relative;
	margin:50px auto;
	transform:rotate(45deg);
	animation:heart 1s ease-in infinite;
}
.heart:after,.heart:before {
	content:'';
	width:100%;
	height:100%;
	background-color:#cc2a5d;
	position:absolute;
	top:0;
	left:0;
	border-radius:50%;
}
.heart:after {
	transform:translateY(-50%);
}
.heart:before {
	transform:translateX(-50%);
}

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

怦然心动(原创)

主要用css实现心脏跳动的效果 ,送给心爱的她(他)

0