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%);
}
主要用css实现心脏跳动的效果 ,送给心爱的她(他)