Breathing Giphy Logo
How do I make an breathing giphy logo?
Saw this Giphy logo animation on Alphaworks and had to try my hand at remaking it with markup and CSS.. What is a breathing giphy logo? How do you make a breathing giphy logo? This script and codes were developed by Michael Lee on 20 January 2023, Friday.
Breathing Giphy Logo Previews
Breathing Giphy Logo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Breathing Giphy Logo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="absolute Giphy"> <div class="absolute bg--yellow Giphy-top"></div> <div class="absolute bg--green Giphy-left"></div> <div class="absolute bg--purple Giphy-right"></div> <div class="absolute bg--blue Giphy-bottom"></div> <div class="absolute bg--red Giphy-plane"></div> <div class="absolute bg--darkPurple Giphy-shadow"></div>
</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>Breathing Giphy Logo - Script Codes CSS Codes
.bg--green { background-color: #00ff94;
}
.bg--blue { background-color: #00cbff;
}
.bg--purple { background-color: #9a1fff;
}
.bg--darkPurple { background-color: #4d0f81;
}
.bg--yellow { background-color: #ffff93;
}
.bg--red, .Giphy-plane:before, .Giphy-plane:after { background-color: #ff6562;
}
.absolute { position: absolute;
}
.relative { position: relative;
}
body { background: #000;
}
.Giphy { left: 50%; top: 50%; width: 90px; height: 112px; transform: translate(-50%, -50%);
}
.Giphy-top { top: 0; width: 60px; height: 10px; -webkit-animation-name: top; -moz-animation-name: top; animation-name: top; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
.Giphy-right { right: 0px; top: 40px; width: 10px; height: 62px; -webkit-animation-name: right; -moz-animation-name: right; animation-name: right; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
.Giphy-bottom { bottom: 0; width: 90px; height: 10px; -webkit-animation-name: bottom; -moz-animation-name: bottom; animation-name: bottom; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
.Giphy-left { left: 0; top: 10px; width: 10px; height: 92px; -webkit-animation-name: left; -moz-animation-name: left; animation-name: left; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
.Giphy-plane { right: 10px; top: 10px; width: 10px; height: 20px; -webkit-animation-name: plane; -moz-animation-name: plane; animation-name: plane; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
.Giphy-plane:before { content: ''; left: -10px; position: absolute; top: -10px; width: 10px; height: 30px;
}
.Giphy-plane:after { content: ''; right: -10px; position: absolute; bottom: 0; width: 10px; height: 10px;
}
.Giphy-shadow { right: 0; top: 30px; width: 10px; height: 10px; -webkit-animation-name: shadow; -moz-animation-name: shadow; animation-name: shadow; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
@-webkit-keyframes left { 0% { left: 0; } 50% { left: -17px; } 60% { left: 2px; } 70% { left: -1px; } 80% { left: 1px; } 100% { left: 0; }
}
@-moz-keyframes left { 0% { left: 0; } 50% { left: -17px; } 60% { left: 2px; } 70% { left: -1px; } 80% { left: 1px; } 100% { left: 0; }
}
@keyframes left { 0% { left: 0; } 50% { left: -17px; } 60% { left: 2px; } 70% { left: -1px; } 80% { left: 1px; } 100% { left: 0; }
}
@-webkit-keyframes top { 0% { top: 0; } 50% { top: -17px; } 60% { top: 2px; } 70% { top: -1px; } 80% { top: 1px; } 100% { top: 0; }
}
@-moz-keyframes top { 0% { top: 0; } 50% { top: -17px; } 60% { top: 2px; } 70% { top: -1px; } 80% { top: 1px; } 100% { top: 0; }
}
@keyframes top { 0% { top: 0; } 50% { top: -17px; } 60% { top: 2px; } 70% { top: -1px; } 80% { top: 1px; } 100% { top: 0; }
}
@-webkit-keyframes bottom { 0% { bottom: 0; } 50% { bottom: -17px; } 60% { bottom: 2px; } 70% { bottom: -1px; } 80% { bottom: 1px; } 100% { bottom: 0; }
}
@-moz-keyframes bottom { 0% { bottom: 0; } 50% { bottom: -17px; } 60% { bottom: 2px; } 70% { bottom: -1px; } 80% { bottom: 1px; } 100% { bottom: 0; }
}
@keyframes bottom { 0% { bottom: 0; } 50% { bottom: -17px; } 60% { bottom: 2px; } 70% { bottom: -1px; } 80% { bottom: 1px; } 100% { bottom: 0; }
}
@-webkit-keyframes right { 0% { right: 0; } 50% { right: -17px; } 60% { right: 2px; } 70% { right: -1px; } 80% { right: 1px; } 100% { right: 0; }
}
@-moz-keyframes right { 0% { right: 0; } 50% { right: -17px; } 60% { right: 2px; } 70% { right: -1px; } 80% { right: 1px; } 100% { right: 0; }
}
@keyframes right { 0% { right: 0; } 50% { right: -17px; } 60% { right: 2px; } 70% { right: -1px; } 80% { right: 1px; } 100% { right: 0; }
}
@-webkit-keyframes plane { 0% { right: 10px; } 50% { right: -7px; top: -7px; } 60% { right: 12px; top: 12px; } 70% { right: 9px; top: 9px; } 80% { right: 11px; top: 11px; } 100% { right: 10px; }
}
@-moz-keyframes plane { 0% { right: 10px; } 50% { right: -7px; top: -7px; } 60% { right: 12px; top: 12px; } 70% { right: 9px; top: 9px; } 80% { right: 11px; top: 11px; } 100% { right: 10px; }
}
@keyframes plane { 0% { right: 10px; } 50% { right: -7px; top: -7px; } 60% { right: 12px; top: 12px; } 70% { right: 9px; top: 9px; } 80% { right: 11px; top: 11px; } 100% { right: 10px; }
}
@-webkit-keyframes shadow { 0% { right: 0px; top: 30px; } 50% { right: -17px; top: 21px; } 60% { right: 2px; top: 32px; } 70% { right: -1px; top: 29px; } 80% { right: 1px; top: 31px; } 100% { right: 0px; top: 30px; }
}
@-moz-keyframes shadow { 0% { right: 0px; top: 30px; } 50% { right: -17px; top: 21px; } 60% { right: 2px; top: 32px; } 70% { right: -1px; top: 29px; } 80% { right: 1px; top: 31px; } 100% { right: 0px; top: 30px; }
}
@keyframes shadow { 0% { right: 0px; top: 30px; } 50% { right: -17px; top: 21px; } 60% { right: 2px; top: 32px; } 70% { right: -1px; top: 29px; } 80% { right: 1px; top: 31px; } 100% { right: 0px; top: 30px; }
}
Breathing Giphy Logo - Script Codes JS Codes
/* Breathing Giphy Logo michaellee / 2014-05-22 https://michaelsoolee.com
*/
| Developer | Michael Lee |
| Username | michaellee |
| Uploaded | January 20, 2023 |
| Rating | 3.5 |
| Size | 3,483 Kb |
| Views | 14,168 |
Do you need developer help for Breathing Giphy Logo?
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!
Michael Lee (michaellee) Script Codes
| Name | Size |
| Illustrated CSS Switch | 3,154 Kb |
| Responsive C3.js chart | 2,111 Kb |
| IOS Messages Typing Bubble | 2,933 Kb |
| SVG Hearts | 1,513 Kb |
| Profile background and color changer prototype for CodeHive | 6,454 Kb |
| Admin Dropdown Menu | 3,865 Kb |
| X Mobile Menu | 3,833 Kb |
| Reveal password toggle | 3,037 Kb |
| My Daily Routine Visualized | 3,544 Kb |
| Animated CSS Poly Drop | 3,287 Kb |
Create amazing sales emails 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 |
| LeMandinque | Aadesida | 9,046 Kb |
| Kudos Please | TimPietrusky | 6,624 Kb |
| React JS Movie Info App | MTushar | 4,870 Kb |
| IE flex collapse bug fix | Rowno | 2,678 Kb |
| A Pen by Mike Otis | Mikeotis | 3,185 Kb |
| Board Site | IndianaLuft | 10,542 Kb |
| Border-radius animation | Yukulele | 2,480 Kb |
| Long Shadow Button | Uixcrazy | 3,550 Kb |
| Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
| Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 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!