"Pulse_Tracking"
Bootstrap 3.0.0 Snippet by Siddharth Panchal

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <title></title> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="bg"> <div class="screen"> <span class="shadow"></span> <img class="heart" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/HEART.png"> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div> <h2 class="bpm one">67 BPM</h2> </div> <div class="watch"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/red-watch.png"> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
.bg { display: flex; position: absolute; height: 100%; width: 100%; background: #fab49b; justify-content: space-around; color: #fff; } .watch { position: absolute; top: 50%; transform: translateX(-21.15%) translateY(-49.75%); } .screen { transform: scale(0.4); width: 272px; height: 340px; margin: auto; position: relative; position: relative; flex-direction: column; background: #9e243e; } .heart { margin: 0 auto; display: block; position: absolute; top: 120px; left: 0; right: 0; width: 66%; opacity: 0.95; animation: beat 1.2s ease-in-out infinite forwards; } .bpm { font-size: 40px; letter-spacing: 0.1em; font-family: rift-soft, sans-serif; color: #ffe1dd; opacity: 1; z-index: 100; position: relative; text-align: center; top: 55px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .shadow { width: 20px; height: 20px; margin: -10px 0 0 -10px; top: 50%; left: 50%; border-radius: 100px; box-shadow: 0 0 200px 60px rgba(70, 0, 44, 0.6); position: absolute; z-index: 0; animation: beat-shadow 1.2s ease-in-out infinite forwards; } .tick { width: 10px; height: 10px; background: #ff6c5e; opacity: 0.6; border-radius: 100%; position: absolute; transition: all 0.3s ease-out; &:nth-of-type(1) { top: 20px; left: 126px; animation: tock 12s ease-out 0s infinite forwards; } &:nth-of-type(2) { top: 50px; right: 60px; animation: tock 12s ease-out 1s infinite forwards; } &:nth-of-type(3) { top: 100px; right: 25px; animation: tock 12s ease-out 2s infinite forwards; } &:nth-of-type(4) { top: 165px; right: 10px; animation: tock 12s ease-out 3s infinite forwards; } &:nth-of-type(5) { bottom: 90px; right: 25px; animation: tock 12s ease-out 4s infinite forwards; } &:nth-of-type(6) { bottom: 45px; right: 60px; animation: tock 12s ease-out 5s infinite forwards; } &:nth-of-type(7) { bottom: 20px; right: 126px; opacity: 1; background: #ffd0cb; // animation: tock 12s ease-out 6s infinite forwards; } &:nth-of-type(8) { bottom: 45px; left: 60px; animation: tock 12s ease-out 7s infinite forwards; } &:nth-of-type(9) { bottom: 90px; left: 25px; animation: tock 12s ease-out 8s infinite forwards; } &:nth-of-type(10) { top: 165px; left: 10px; animation: tock 12s ease-out 9s infinite forwards; } &:nth-of-type(11) { top: 100px; left: 25px; animation: tock 12s ease-out 10s infinite forwards; } &:nth-of-type(12) { top: 50px; left: 60px; animation: tock 12s ease-out 11s infinite forwards; } &:nth-of-type(1), &:nth-of-type(4), &:nth-of-type(7), &:nth-of-type(10) { width: 20px; height: 20px; } } @keyframes beat { 0%, 100% { transform: scale3d(1, 1, 1); } 15%, 45% { transform: scale3d(1.225, 1.225, 1); } 35% { transform: scale3d(1.15, 1.15, 1); } 65% { transform: scale3d(1, 1, 1); } } @keyframes beat-shadow { 0%, 100% { transform: scale3d(1, 1, 1); } 15%, 45% { transform: scale3d(1.1, 1.1, 1); } 30%, 60% { transform: scale3d(1, 1, 1); } } @keyframes tock { 0%, 2% { opacity: 0.95; background: #ffd0cb; } 10%, 100% { opacity: 0.6; background: #ff6c5e; } }

Related: See More


Questions / Comments: