css實(shí)現(xiàn) 跳動(dòng)的愛心 昨夜星光閃閃，愛你的心滿滿
<!DOCTYPE?html>
<html?lang="en">
<head>
??<meta?charset="UTF-8">
??<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
??<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
??<title>Document</title>
</head>
<style>
??*?{
????padding:?0px;
????margin:?0px;
??}
??body?{
????width:?100vw;
????height:?100vh;
????display:?flex;
????background-color:?pink;
????justify-content:?center;
????align-items:?center;
??}
??.love?{
????height:?200px;
????width:?200px;
????background-color:?red;
????position:?relative;
????transform:?rotate(45deg)?scale(0.85);
????animation:?love?1s?infinite;
??}
??.love:hover?{
????animation:?heat?0.4s?infinite?alternate;
??}
??.love::after?{
????content:?'';
????height:?200px;
????width:?200px;
????background-color:?red;
????position:?absolute;
????top:?-100px;
????border-radius:?50%;
??}
??.love::before?{
????content:?'';
????height:?200px;
????width:?200px;
????background-color:?red;
????position:?absolute;
????left:?-100px;
????border-radius:?50%;
??}
??@keyframes?love?{
????0%?{
??????transform:?rotate(45deg)?scale(0.85);
????}
????50%?{
??????transform:?rotate(45deg)?scale(1);
????}
????100%?{
??????transform:?rotate(45deg)?scale(1);
????}
??}
??@keyframes?heat?{
????0%?{
??????transform:?rotate(45deg)?scale3d(1,?1,?1);
????}
????50%?{
??????transform:?rotate(45deg)?scale3d(1.1,?1.1,?1.1);
????}
????100%?{
??????transform:?rotate(45deg)?scale3d(1,?1,?1);
????}
??}
</style>
<body>
??<div?class="love">
??</div>
</body>
</html>
