Heart Monitor
How do I make an heart monitor?
Heart Monitor with a Game Over screen. made with slim and normal CSS.. What is a heart monitor? How do you make a heart monitor? This script and codes were developed by Ty Strong on 11 August 2022, Thursday.
Heart Monitor Previews
Heart Monitor - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Heart Monitor</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
body{ background: #37374a;
}
div { position: relative; margin: 100px auto; width: 800px; height: 300px; background: #111119; box-shadow: 0 0 10px #000 inset;
}
span { display: inline-block; background: transparent; margin: 150px 0; width: 4px; height: 4px; border-radius: 50%; animation: heart 10s linear; box-shadow: 0 0 2px #000;
}
p { font-family: 'Oswald', sans-serif; position: absolute; font-size: 100px; font-weight: 700; color: transparent; left: 170px; top: -40px; animation: fade 1000s linear;
}
@keyframes heart{ 0% {margin-top: 150px;} 2% {background: transparent;} 5% {background: #0c0;} 9.5% {margin-top: 150px;} 10% {margin-top: 180px;} 10.5% {margin-top: 150px;} 11% {margin-top: 80px;} 12% {margin-top: 200px;} 13% {margin-top: 150px;} 19.5% {margin-top: 150px;} 20% {margin-top: 180px;} 20.5% {margin-top: 150px;} 21% {margin-top: 80px;} 22% {margin-top: 200px;} 23% {margin-top: 150px;} 29.5% {margin-top: 150px;} 30% {margin-top: 180px;} 30.5% {margin-top: 150px;} 31% {margin-top: 80px;} 32% {margin-top: 200px;} 33% {margin-top: 150px;} 39.5% {margin-top: 150px;} 40% {margin-top: 180px;} 40.5% {margin-top: 150px;} 41% {margin-top: 80px;} 42% {margin-top: 200px;} 43% {margin-top: 150px;} 49.5% {margin-top: 150px;} 50% {margin-top: 160px;} 50.5% {margin-top: 150px;} 51% {margin-top: 130px;} 52% {margin-top: 180px;} 53% {margin-top: 150px;} 95% {background: #0c0;} 100% {margin-left: 800px;}
}
@keyframes fade { 0% { color: transparent; text-shadow: none; } 1% { color: transparent; text-shadow: none; } 1.1% { color: #444450; text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #112, -1px -1px #000; } 1.2% { color: #cccce0; text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #112, -1px -1px #000; } 1.3% { color: #444450; text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #112, -1px -1px #000; } 1.4% { color: #cccce0; text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #112, -1px -1px #000; } 1.5% { color: #444450; text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #112, -1px -1px #000; } 100% { color: #444450; text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #000, -1px -1px #000; }
}
.mysite { font-family: arial; font-size: 18px; text-decoration: none; color: rgba(0,0,0,0.5); border-bottom: solid 1px rgba(0,0,0,0.5); position: fixed; bottom: 10px; right: 10px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div> <span></span> <p> Game Over </p>
</div>
<a class="mysite" href="http://tystrong.me">Check out my new Site!</a>
</body>
</html>
Heart Monitor - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
body{ background: #37374a;
}
div { position: relative; margin: 100px auto; width: 800px; height: 300px; background: #111119; box-shadow: 0 0 10px #000 inset;
}
span { display: inline-block; background: transparent; margin: 150px 0; width: 4px; height: 4px; border-radius: 50%; animation: heart 10s linear; box-shadow: 0 0 2px #000;
}
p { font-family: 'Oswald', sans-serif; position: absolute; font-size: 100px; font-weight: 700; color: transparent; left: 170px; top: -40px; animation: fade 1000s linear;
}
@keyframes heart{ 0% {margin-top: 150px;} 2% {background: transparent;} 5% {background: #0c0;} 9.5% {margin-top: 150px;} 10% {margin-top: 180px;} 10.5% {margin-top: 150px;} 11% {margin-top: 80px;} 12% {margin-top: 200px;} 13% {margin-top: 150px;} 19.5% {margin-top: 150px;} 20% {margin-top: 180px;} 20.5% {margin-top: 150px;} 21% {margin-top: 80px;} 22% {margin-top: 200px;} 23% {margin-top: 150px;} 29.5% {margin-top: 150px;} 30% {margin-top: 180px;} 30.5% {margin-top: 150px;} 31% {margin-top: 80px;} 32% {margin-top: 200px;} 33% {margin-top: 150px;} 39.5% {margin-top: 150px;} 40% {margin-top: 180px;} 40.5% {margin-top: 150px;} 41% {margin-top: 80px;} 42% {margin-top: 200px;} 43% {margin-top: 150px;} 49.5% {margin-top: 150px;} 50% {margin-top: 160px;} 50.5% {margin-top: 150px;} 51% {margin-top: 130px;} 52% {margin-top: 180px;} 53% {margin-top: 150px;} 95% {background: #0c0;} 100% {margin-left: 800px;}
}
@keyframes fade { 0% { color: transparent; text-shadow: none; } 1% { color: transparent; text-shadow: none; } 1.1% { color: #444450; text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #112, -1px -1px #000; } 1.2% { color: #cccce0; text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #112, -1px -1px #000; } 1.3% { color: #444450; text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #112, -1px -1px #000; } 1.4% { color: #cccce0; text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #112, -1px -1px #000; } 1.5% { color: #444450; text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #112, -1px -1px #000; } 100% { color: #444450; text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #000, -1px -1px #000; }
}
.mysite { font-family: arial; font-size: 18px; text-decoration: none; color: rgba(0,0,0,0.5); border-bottom: solid 1px rgba(0,0,0,0.5); position: fixed; bottom: 10px; right: 10px;
}
| Developer | Ty Strong |
| Username | tystrong |
| Uploaded | August 11, 2022 |
| Rating | 3 |
| Size | 3,048 Kb |
| Views | 36,432 |
Do you need developer help for Heart Monitor?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Ty Strong (tystrong) Script Codes
| Name | Size |
| Flat logo with hover effect. | 2,572 Kb |
| Logo Cubes in Slim and SCSS | 2,661 Kb |
| The Greatest. | 1,723 Kb |
| Logo with Slim and SCSS | 3,120 Kb |
| Info on Hover | 3,258 Kb |
| Rolling Circle | 1,942 Kb |
| RADICAL | 2,222 Kb |
| Menu | 3,154 Kb |
| New Personal Page | 3,510 Kb |
| Colors and Media Queries | 2,952 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| P1 | Vivi_Lai | 1,533 Kb |
| Atom | Bhlaird | 1,932 Kb |
| Flat UI Button | Honchoman | 2,289 Kb |
| Wrap_Test | Mscfourn | 7,503 Kb |
| A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
| Css3 slide | Nakome | 3,190 Kb |
| CSS3 iPad | Vikvarg | 1,766 Kb |
| MAD9013 - Float Images with Content | Mad-d | 2,220 Kb |
| Horizontal slider on scroll | Alojzije | 2,672 Kb |
| Responsive scrolling text | Ashdurham | 2,259 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!