Subtle CSS3 Heart Beat
How do I make an subtle css3 heart beat?
I wanted to do a very subtle heart beat in the footer of our websites, so using a custom icon font & CSS3 Animation, i was able to easily achieve a very subtle, stylish result. I hope you like it and as always are very welcome to use it in your projects. . What is a subtle css3 heart beat? How do you make a subtle css3 heart beat? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.
Subtle CSS3 Heart Beat - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subtle CSS3 Heart Beat</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Heart Specific -->
<div id="wrap"> <span class="text">We</span> <span class="heart-wrap"><span class="entypo-heart"></span></span> <span class="text">CodePen</span>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Subtle CSS3 Heart Beat - Script Codes CSS Codes
/* --------------------------- Fonts & Page ------------------------ */
@import "http://fonts.googleapis.com/css?family=Roboto:500,100";
@import "http://weloveiconfonts.com/api/?family=entypo";
/* Entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;}
/* Page */
html, body { margin: 0; padding: 0; height: 100%;}
body { background-image: -webkit-gradient( linear, 80 bottom, left 60, color-stop(0, rgb(76,79,122)), color-stop(0.57, rgb(82,70,122)));}
/* --------------------------- Heart Beat Specific ------------------------ */
#wrap { padding-top: 120px; text-align: center; display: block; width: 100%; height: 58px;}
#wrap span.text { display: inline-block; font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 50px; line-height: 58px; color: #fff; padding: 0 10px;}
#wrap span.text a { text-decoration: none; font-weight: 500; color: #fff;}
#wrap .heart-wrap { display: inline-block; position: relative; width: 60px; height: 60px;}
#wrap .entypo-heart:before { display: block; color: #d07598; font-size: 46px; speak: none; /* Prevent screen readers */ -webkit-font-smoothing: antialiased; /* Webkit font tweaking */ /* Boost hardware acceleration where possible */ -webkit-transform: scale(1) translate3d(0px,0px,0px); -moz-transform: scale(1) translate3d(0px,0px,0px); -o-transform: scale(1) translate3d(0px,0px,0px); transform: scale(1) translate3d(0px,0px,0px); /* Cross browser animation */ -webkit-animation: beatz 2s infinite; /* Chrome, Safari 5+ */ -moz-animation: beatz 2s infinite; /* Firefox 5-15 */ -o-animation: beatz 2s infinite; /* Opera 12.00 */ animation: beatz 2s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */} /* Heart beat animation*/ @-webkit-keyframes beatz { 0% { font-size: 50px;} 2% { font-size: 53px;} 4% { font-size: 50px;} 6% { font-size: 53px;} 8% { font-size: 50px;} 100% { font-size: 50px;} } @-moz-keyframes beatz { 0% { font-size: 50px;} 2% { font-size: 53px;} 4% { font-size: 50px;} 6% { font-size: 53px;} 8% { font-size: 50px;} 100% { font-size: 50px;} } @-o-keyframes beatz { 0% { font-size: 50px;} 2% { font-size: 53px;} 4% { font-size: 50px;} 6% { font-size: 53px;} 8% { font-size: 50px;} 100% { font-size: 50px;} } @keyframes beatz { 0% { font-size: 50px;} 2% { font-size: 53px;} 4% { font-size: 50px;} 6% { font-size: 53px;} 8% { font-size: 50px;} 100% { font-size: 50px;} }
Subtle CSS3 Heart Beat - Script Codes JS Codes
/* --------------------------- Follow me on Twitter... @mattsince87 ------------------------ */
Developer | Matt Litherland |
Username | mattsince87 |
Uploaded | August 03, 2022 |
Rating | 3.5 |
Size | 2,691 Kb |
Views | 48,576 |
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!
Name | Size |
Animated CSS3 Mobile Phone | 4,609 Kb |
Wishlist Toggle Button | 3,774 Kb |
Gradient over Google Maps | 4,329 Kb |
Google Inspired CSS Preloader | 3,008 Kb |
SVG Firework Animation | 3,306 Kb |
Responsive Flat UI Kit | 17,612 Kb |
Node Waves | 3,216 Kb |
Slick Two Part Form | 6,199 Kb |
Animated SVG Path | 3,853 Kb |
Animated Resposnive SVG Path | 5,339 Kb |
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!
Name | Username | Size |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Loader | MikitaLisavets | 3,321 Kb |
This in constructor context | _shree33 | 1,718 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
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!