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实现心脏跳动的效果 ,送给心爱的她(他)