CSS做跳动的红心HTML代码2.CSS代码3.用animation

HTML代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="heart">
  <div class="left"></div>
  <div class="right"></div>
  <div class="middle"></div>
</div>
</body>
</html>

2.CSS代码

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#heart{
  width:50px;
  height:50px;
  margin:200px;
  position:relative;
  transition:all 0.5s;
}
#heart:hover{
  transform:scale(1.5);
}
#heart>.left{
  border:1px solid red;
  width:50px;
  height:50px;
  position:absolute;
  bottom:100%;
  right:100%;
  transform:rotate(45deg) translateX(22px);
  border-radius:50% 0 0 50%;
  background-color: red;

}
#heart>.right{
  width:50px;
  height:50px;
  position:absolute;
  bottom:100%;
  left:100%;
   transform:rotate(45deg);
  transform:rotate(45deg) translateY(22px);
  border-radius:50% 50% 0 0;
  background-color: red;

}
.middle{
  width:50px;
  height:50px;
  transform:rotate(45deg);
  background-color: red;
}

3.用animation

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#heart{
  width:50px;
  height:50px;
  margin:200px;
  position:relative;
  animation:0.5s heart infinite;
}
@keyframes heart{
  0%{
    transform:scale(1);}
  100%{
    transform:scale(1.3);
  }
}

#heart>.left{
  border:1px solid red;
  width:50px;
  height:50px;
  position:absolute;
  bottom:100%;
  right:100%;
  transform:rotate(45deg) translateX(22px);
  border-radius:50% 0 0 50%;
  background-color: red;

}
#heart>.right{
  width:50px;
  height:50px;
  position:absolute;
  bottom:100%;
  left:100%;
   transform:rotate(45deg);
  transform:rotate(45deg) translateY(22px);
  border-radius:50% 50% 0 0;
  background-color: red;

}
.middle{
  width:50px;
  height:50px;
  transform:rotate(45deg);
  background-color: red;
}