<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> </div><div class="box"> <div class="heart"> <span class="text"><h4>ADMEC India</h4> (Raj Kumar)</span> </div> </div>

body{ margin: 0; padding: 0; background-color: #363636; } .box{ position: absolute; top: 50%; left: 50%; border-radius: 50%; border:5px solid #fff; padding: 70px; background-color: #262626; box-shadow: 45px 45px 45px rgba(0, 0, 0, 0.8); transform: translate(-50%, -50%); z-index: 9; overflow: hidden; } .text{ position:absolute; z-index:9; font-size:14px; transform:rotate(-45deg) translate(-20px, -10px); color:#fff; text-align:center; } .text h4{font-size:16px; color:#ff0;} .heart{ position: relative; width: 100px; height: 100px; background-color: #f00; transform: rotate(45deg); box-shadow: 10px 0px 50px #f00; animation: feel 1s linear infinite; } .heart:before{ content: ""; position: absolute; width: 100%; height: 100%; background-color: #f00; top: -50%; left: 0; border-top-left-radius: 50px; border-top-right-radius: 50px; } .heart:after{ content: ""; position: absolute; width: 100%; height: 100%; background-color: #f00; top: 0%; right: 50%; border-top-left-radius: 50px; border-bottom-left-radius: 50px;; } @keyframes feel{ 0%{transform: scale(1) rotate(45deg) translate(10px, 10px);} 20%{transform: scale(1.2) rotate(45deg) translate(10px, 10px);} 30%{transform: scale(1) rotate(45deg) translate(10px, 10px);} 40%{transform: scale(1.2) rotate(45deg) translate(10px, 10px);} 40%{transform: scale(1) rotate(45deg) translate(10px, 10px);} 60%{transform: scale(1.2) rotate(45deg) translate(10px, 10px);} 60%{transform: scale(1) rotate(45deg) translate(10px, 10px);} 70%{transform: scale(1.2) rotate(45deg) translate(10px, 10px);} 80%{transform: scale(1) rotate(45deg) translate(10px, 10px);} 90%{transform: scale(1.2) rotate(45deg) translate(10px, 10px);} 100%{transform: scale(1) rotate(45deg) translate(10px, 10px);} }