Mok20123 Logo Animation
How do I make an mok20123 logo animation?
What is a mok20123 logo animation? How do you make a mok20123 logo animation? This script and codes were developed by Alan Mok | Aki Isamu on 28 July 2022, Thursday.
Mok20123 Logo Animation Previews
Mok20123 Logo Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>mok20123 Logo Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="nav"> <div id="logo"> <div class="bg"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="m shadow"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="m"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div>
</body>
</html>
Mok20123 Logo Animation - Script Codes CSS Codes
html, body { background: #222222; padding: 0; margin: 0;
}
#body { height: 100%;
}
#nav {}
#nav #logo { position: fixed; display: block; z-index: 999; left: 0; top: 0;
}
#nav #logo .bg { background-size: auto 100%; border: 0 solid #FFFFFF; margin-bottom: -5px; position: absolute; height: 160px; width: 1200px; left: -600px; top: 0px; -webkit-transform: rotate(-45deg); -webkit-transform-origin: 50% 0%; -moz-transform: rotate(-45deg); -moz-transform-origin: 50% 0%; -ms-transform: rotate(-45deg); -ms-transform-origin: 50% 0%; -o-transform: rotate(-45deg); -o-transform-origin: 50% 0%; transform: rotate(-45deg); transform-origin: 50% 0%;
}
#nav #logo .bg > div { height: 20%;
}
#nav #logo .bg > div { position: absolute; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; display: block; height: 20%; right: 0; left: 0;
}
#nav #logo .bg > div:nth-of-type(1) { background: #B23EFF; top: 0%; }
#nav #logo .bg > div:nth-of-type(2) { background: #00FF99; top: 20%; }
#nav #logo .bg > div:nth-of-type(3) { background: #00CCFF; top: 40%; }
#nav #logo .bg > div:nth-of-type(4) { background: #FFAA22; top: 60%; }
#nav #logo .bg > div:nth-of-type(5) { background: #FF4444; top: 80%; }
#nav #logo .m { position: absolute; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; display: block; left: 35px; top: 35px;
}
#nav #logo .m.shadow { left: 38px; top: 38px;
}
#nav #logo .m > div { background: #FFFFFF; position: absolute; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; display: block;
}
#nav #logo .m.shadow > div { background: rgba(0,0,0,0.2);
}
#nav #logo .m > div:nth-of-type(2) { -webkit-transform-origin: 50% 0%; -webkit-transform: rotate(45deg); -moz-transform-origin: 50% 0%; -moz-transform: rotate(45deg); -ms-transform-origin: 50% 0%; -ms-transform: rotate(45deg); -o-transform-origin: 50% 0%; -o-transform: rotate(45deg); transform-origin: 50% 0%; transform: rotate(45deg);
}
#nav #logo .m { height: 50px; width: 70px; top: 35px;
}
#nav #logo .m > div:nth-of-type(1) { width: 7px; left: 0px; top: 14px; bottom: 0px; }
#nav #logo .m > div:nth-of-type(2) { width: 7px; left: 13px; top: 2px; height: 20px; }
#nav #logo .m > div:nth-of-type(3) { height: 7px; left: 14px; top: 0px; right: 7px; }
#nav #logo .m > div:nth-of-type(4) { width: 7px; left: 33px; top: 7px; bottom: 0px; }
#nav #logo .m > div:nth-of-type(5) { width: 7px; left: 63px; top: 0px; bottom: 0px; }
#nav #logo .m > div:nth-of-type(5),
#nav #logo .m > div:nth-of-type(4),
#nav #logo .m > div:nth-of-type(1) { -webkit-transform: translateY(0) scaleY(0); -webkit-animation-name: y1; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 0s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 0 0;
}
#nav #logo .m > div:nth-of-type(4) { -webkit-animation-delay: 0.25s;
}
#nav #logo .m > div:nth-of-type(1) { -webkit-animation-delay: 0.5s;
}
#nav #logo .m > div:nth-of-type(2) { -webkit-transform: scaleY(0) translateY(100%) rotate(45deg); -webkit-animation-name: y2; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 0.75s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 0 0;
}
#nav #logo .m > div:nth-of-type(3) { -webkit-transform: scaleX(0); -webkit-animation-name: x1; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 1s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 0 0;
}
#nav #logo .m > div:nth-of-type(5),
#nav #logo .m > div:nth-of-type(4),
#nav #logo .m > div:nth-of-type(1) { -moz-transform: translateY(0) scaleY(0); -moz-animation-name: y1; -moz-animation-duration: 0.5s; -moz-animation-delay: 0s; -moz-animation-fill-mode: forwards; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: 1; -moz-transform-origin: 0 0;
}
#nav #logo .m > div:nth-of-type(4) { -moz-animation-delay: 0.25s;
}
#nav #logo .m > div:nth-of-type(1) { -moz-animation-delay: 0.5s;
}
#nav #logo .m > div:nth-of-type(2) { -moz-transform: scaleY(0) translateY(100%) rotate(45deg); -moz-animation-name: y2; -moz-animation-duration: 0.5s; -moz-animation-delay: 0.75s; -moz-animation-fill-mode: forwards; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: 1; -moz-transform-origin: 0 0;
}
#nav #logo .m > div:nth-of-type(3) { -moz-transform: scaleX(0); -moz-animation-name: x1; -moz-animation-duration: 0.5s; -moz-animation-delay: 1s; -moz-animation-fill-mode: forwards; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: 1; -moz-transform-origin: 0 0;
}
.m { -moz-animation-name: stylie-transform-keyframes; -moz-animation-duration: 2000ms; -moz-animation-delay: 0ms; -moz-animation-fill-mode: forwards; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-transform-origin: 0 0; -ms-animation-name: stylie-transform-keyframes; -ms-animation-duration: 2000ms; -ms-animation-delay: 0ms; -ms-animation-fill-mode: forwards; -ms-animation-timing-function: linear; -ms-animation-iteration-count: infinite; -ms-transform-origin: 0 0; -o-animation-name: stylie-transform-keyframes; -o-animation-duration: 2000ms; -o-animation-delay: 0ms; -o-animation-fill-mode: forwards; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -o-transform-origin: 0 0; animation-name: y1; animation-duration: 0.5s; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-iteration-count: 1; transform-origin: 0 0;
}
@-webkit-keyframes x1 {/*cubic-bezier(.25,.25,.75,.75)*/ 0% {-webkit-transform: scaleX(0) translateX(0);} 100% {-webkit-transform: scaleX(1) translateX(0);}
}
@-webkit-keyframes y1 {/*cubic-bezier(.25,.25,.75,.75)*/ 0% {-webkit-transform: scaleY(0) translateY(0);} 100% {-webkit-transform: scaleY(1) translateY(0);}
}
@-webkit-keyframes y2 {/*cubic-bezier(.25,.25,.75,.75)*/ 0% {-webkit-transform: rotate(45deg) translateY(100%) scaleY(0);} 100% {-webkit-transform: rotate(45deg) translateY( 0 ) scaleY(1);}
}
@-moz-keyframes x1 {/*cubic-bezier(.25,.25,.75,.75)*/ 0% {-moz-transform: scaleX(0) translateX(0);} 100% {-moz-transform: scaleX(1) translateX(0);}
}
@-moz-keyframes y1 {/*cubic-bezier(.25,.25,.75,.75)*/ 0% {-moz-transform: scaleY(0) translateY(0);} 100% {-moz-transform: scaleY(1) translateY(0);}
}
@-moz-keyframes y2 {/*cubic-bezier(.25,.25,.75,.75)*/ 0% {-moz-transform: rotate(45deg) translateY(100%) scaleY(0);} 100% {-moz-transform: rotate(45deg) translateY( 0 ) scaleY(1);}
}
| Developer | Alan Mok | Aki Isamu |
| Username | mok20123 |
| Uploaded | July 28, 2022 |
| Rating | 3 |
| Size | 2,480 Kb |
| Views | 30,360 |
Do you need developer help for Mok20123 Logo Animation?
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!
Alan Mok | Aki Isamu (mok20123) Script Codes
| Name | Size |
| ImageGallery.js, a map img gallery adapter | 9,842 Kb |
| Div Gallery | 4,709 Kb |
| Logo Animation | 9,954 Kb |
| Swipe as the home screen. | 10,384 Kb |
| Useless - HK Cyberport location | 2,236 Kb |
| Timeline, description | 3,693 Kb |
| No Game No Life Logo Animation | 3,154 Kb |
| ContextMenu.js | 5,141 Kb |
| Search interface | 3,572 Kb |
| ParseURLParams js | 2,015 Kb |
Create amazing love letters 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 |
| Slick Slider | Wearebold | 5,913 Kb |
| A Pen by Stan Williams | Stanssongs | 6,706 Kb |
| Brian The CSS Bee | Jonitrythall | 3,922 Kb |
| Css or Czz.. | Judag | 4,111 Kb |
| Weird glowy CSS3 game | Toneworm | 3,684 Kb |
| Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
| Portfolio Landing Page | FDfranklin | 3,585 Kb |
| IE flex collapse bug fix | Rowno | 2,678 Kb |
| Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
| Multiple jCarousel | Pafnuty | 2,461 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!