some hearts

index.html

<div class="wrap1">
  <div class="heart"></div>
  <div class="heart"></div>
  <div class="heart"></div>
  <div class="heart"></div>
</div>

<!--challenge with design! (https://dribbble.com/shots/4784479-Heart-fire-logo-concept-for-dating-app-2-for-sale)-->
<div class="wrap2">
  <div class="heart-wrap">
    <div class="heart"></div>
  </div>
</div>
<!--challenge with design! (https://dribbble.com/shots/4863326-V-skyscrapers-heart-real-estate-logo-design)-->
<div class="wrap3">
  <div class="heart"></div>
  <div class="column1"></div>
  <div class="column2"></div>
</div>

some-hearts.markdown

some hearts

A Pen by taerim on CodePen.

License.

style.css

.wrap1{
  padding:10px;
  width:90px;
  height:90px;
  transform-origin:center center;
  animation: spin 10s linear 0s infinite normal;
}

@keyframes spin{
  0% {
    transform : rotate(0deg)
  }
  100% {
    transform : rotate(360deg)
  }
}

@keyframes pump1{
  0% { transform : rotate(-45deg) scale(1)}
  70% { transform : rotate(-45deg) scale(1.2)}
  100%{
    transform : rotate(-45deg) scale(1); 
  }
}
@keyframes pump3{
  0% { transform : rotate(135deg) scale(1)}
  70% { transform : rotate(135deg) scale(1.2)}
  100%{
    transform : rotate(135deg) scale(1);
  }
}
@keyframes colorchange1{
  from {
    background : #ffb5d3;
  }
  to {
    background : red;
  }
}

.wrap1 .heart{
  background : #ffb5d3;
  animation-duration : 2s;
  animation-iteration-count : infinite;
  height : 30px;
  transform : rotate(-45deg);
  width:30px;
  display:block;
  position:relative;
}
.wrap1 .heart:before,
.wrap1 .heart:after {
  content: "";
  background : #ffb5d3;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.wrap1 .heart:before {
  top: -15px;
  left: 0;
}

.wrap1 .heart:after{
  left:15px;
}

.wrap1 .heart:nth-of-type(1){
  animation-name : pump1;
  left:30px;
}
.wrap1 .heart:nth-of-type(2){
  left:60px;
  transform : rotate(45deg);
}
.wrap1 .heart:nth-of-type(3){
  animation-name : pump3;
  animation-delay:1s;
  left:30px;
  transform : rotate(135deg);
}
.wrap1 .heart:nth-of-type(4){
  left:0px;
  top : -60px;
  transform : rotate(225deg);
}

.wrap2 {
  width:200px;
  height:200px;
  left:130px;
  top:-30px;
  position:relative;
}

.wrap2 .heart-wrap{
   transform:rotate(135deg);
  background : linear-gradient(220deg, #FEB796 0%, #FE9190 40%, #FD4D86 75%);
  width:190px;
  height:190px;
  border-top-left-radius:70%;
  border-bottom-right-radius:70%;
  border-bottom-left-radius:100%;
  border-top-right-radius:40%;
}
.wrap2 .heart-wrap:before{
  content:'';
  background:#ffffff;
  width:120px;
  height:120px;
  position:absolute;
  top:90px;
  left:-20px;
}

.wrap2 .heart-wrap:after{
  content:'';
  background:#F82B6A;
  width:120px;
  height:120px;
  position:absolute;
  top:30px;
  left:40px;
  border-top-left-radius:35%;
  border-bottom-right-radius:35%;
  border-bottom-left-radius:0%;
  border-top-right-radius:25%;
}

.wrap2 .heart{
  z-index:2;
  width:50px;
  height:50px;
  background:#ffffff;
  position:absolute;
  left:85px;
  top:55px;
}

.wrap2 .heart:after,
.wrap2 .heart:before{
  content:'';
  width:50px;
  height:50px;
  border-radius:50%;
  background:#ffffff;
  position:absolute;
 
}

.wrap2 .heart:after{
  left:-25px;
}
.wrap2 .heart:before{
  top:25px;
}
.wrap3{
  width:300px;
  height:300px;
  position:relative;
  left:400px;
  top:-250px;
}

.wrap3 .heart{
  width:30px;
  height:30px;
  background:#4254ce;
  transform:rotate(45deg);

}
.wrap3 .heart:before,
.wrap3 .heart:after{
  content:'';
  width:30px;
  height:30px;
  position:absolute;
}
.wrap3 .heart:before{
  left:-30px;
  background:#4BAFF5;
}
.wrap3 .heart:after{
  background:#6a3ddb;
  top:-30px;
}

.wrap3 .column1{
  width:20px;
  height:70px;
  position:absolute;
  left:-30px;
  z-index:-1;
}
.wrap3 .column1:before,
.wrap3 .column1:after{
  transform: skewY(-45deg);
  content:'';
  position:absolute;
  width:22px;
  height:60px;
}
.wrap3 .column1:before{
  top:-25px;
  left:3px;
  background:#a0daff;
  transform: skewY(45deg);
}
.wrap3 .column1:after{
  top:-3px;
  left:24px;
  background:#56a5ff;
  transform: skewY(45deg);
}


.wrap3 .column2{
  width:20px;
  height:70px;
  position:absolute;
  left:0px;
  z-index:-1;
}
.wrap3 .column2:before,
.wrap3 .column2:after{
  transform: skewY(-45deg);
  content:'';
  position:absolute;
  width:22px;
  height:60px;
}
.wrap3 .column2:before{
  top:-4px;
  left:14px;
  background:#2c83e8;
  transform: skewY(-45deg);
}
.wrap3 .column2:after{
  top:-25px;
  left:36px;
  background:#4c3bdd;
  transform: skewY(-45deg);
}