Monday, April 29, 2019

CSS3 Animation - 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
  padding:100px 0;
  background-color:#c33
}

#heart {
    position: relative;
    width: 100px;
    height: 90px;
    animation: heartbeat 1s infinite;
    margin:0 auto
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #fff;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
   
            transform: rotate(-45deg);
   
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
   
            transform: rotate(45deg);
   
            transform-origin :100% 100%;
}



@keyframes heartbeat
{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}


</style>
</head>

<body>
<div id="heart"></div>
<h1>Follow the heartbeat</h1>
</body>
</html>

1 comment:

  1. I got the new the king casino no deposit bonus【Malaysia】
    【 William】pinterest 더킹카지노 도메인 in 2021, 파라오 카지노 the king casino 바카라 커뮤니티 no deposit 메리트 카지노 먹튀 bonus,【WG98.vip】⚡,taylorlancer,taylorlancer,golfking. 메리트 카지노 도메인

    ReplyDelete