Add Things To Your Web Page: Design #003

Sunday 29 September 2019

Design #003

Source Code


<!-- Created by sachin-->

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>

    
        <style>
         


#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: #c33;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            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>  <div id="heart"></div><br/>

    </body>
</html>

4 comments:

ed treatment tablets25 November 2020 at 12:24
Your style is very unique compared to other folks I've read stuff from. Many thanks for posting when you have the opportunity, Guess I will just book mark this blog.
ReplyDelete
Replies
erectile dysfunction pills25 November 2020 at 12:30
certainly like your website however you have to test the spelling on several of your posts. Many of them are rife with spelling problems and I in finding it very troublesome to inform the reality nevertheless I will certainly come back again.
ReplyDelete
Replies
Web-Hunt3 January 2021 at 23:13
Sorry for that,will check and update. Thank you
ReplyDelete
Replies

Add comment