A Pen by Martin Grand
How do I make an a pen by martin grand?
What is a a pen by martin grand? How do you make a a pen by martin grand? This script and codes were developed by Martin Grand on 11 August 2022, Thursday.
A Pen by Martin Grand - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Martin Grand</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! */ .loader { position: absolute; width: 90px; height: 90px; left: 50%; top: 50%; margin: -50px; -moz-perspective: 180px; -webkit-perspective: 180px; perspective: 180px; -moz-perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%;
}
.loader .loader--element { position: absolute; width: 50%; height: 50%; right: 50%; bottom: 50%; background: red; border-radius: 5px 5px 0 5px; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -moz-animation: loader-rotate 2.5s infinite; -webkit-animation: loader-rotate 2.5s infinite; animation: loader-rotate 2.5s infinite; -moz-animation-timing-function: cubic-bezier(0.25, 0, 0.5, 1.75); -webkit-animation-timing-function: cubic-bezier(0.25, 0, 0.5, 1.75); animation-timing-function: cubic-bezier(0.25, 0, 0.5, 1.75);
}
.loader .loader--element.loader--element-1 { width: 50%; height: 50%;
}
.loader .loader--element.loader--element-2 { width: 25%; height: 25%; -moz-animation-delay: -1.42857s; -webkit-animation-delay: -1.42857s; animation-delay: -1.42857s;
}
@-moz-keyframes loader-rotate { 0% { background: red; -moz-transform: rotate3d(0, 0, 0, 180deg); transform: rotate3d(0, 0, 0, 180deg); } 25% { background: red; -moz-transform: rotate3d(-1, 0, 0, 180deg); transform: rotate3d(-1, 0, 0, 180deg); } 50% { background: red; -moz-transform: rotate3d(0, 0, -1, -180deg); transform: rotate3d(0, 0, -1, -180deg); } 75% { background: red; -moz-transform: rotate3d(0, -1, 0, 180deg); transform: rotate3d(0, -1, 0, 180deg); } 100% { background: red; -moz-transform: rotate3d(0, -1, 0, 360deg); transform: rotate3d(0, -1, 0, 360deg); } 12.5%, 37.5%, 65.5%, 87.5% { background: #cc0000; }
}
@-webkit-keyframes loader-rotate { 0% { background: red; -webkit-transform: rotate3d(0, 0, 0, 180deg); transform: rotate3d(0, 0, 0, 180deg); } 25% { background: red; -webkit-transform: rotate3d(-1, 0, 0, 180deg); transform: rotate3d(-1, 0, 0, 180deg); } 50% { background: red; -webkit-transform: rotate3d(0, 0, -1, -180deg); transform: rotate3d(0, 0, -1, -180deg); } 75% { background: red; -webkit-transform: rotate3d(0, -1, 0, 180deg); transform: rotate3d(0, -1, 0, 180deg); } 100% { background: red; -webkit-transform: rotate3d(0, -1, 0, 360deg); transform: rotate3d(0, -1, 0, 360deg); } 12.5%, 37.5%, 65.5%, 87.5% { background: #cc0000; }
}
@keyframes loader-rotate { 0% { background: red; -moz-transform: rotate3d(0, 0, 0, 180deg); -ms-transform: rotate3d(0, 0, 0, 180deg); -webkit-transform: rotate3d(0, 0, 0, 180deg); transform: rotate3d(0, 0, 0, 180deg); } 25% { background: red; -moz-transform: rotate3d(-1, 0, 0, 180deg); -ms-transform: rotate3d(-1, 0, 0, 180deg); -webkit-transform: rotate3d(-1, 0, 0, 180deg); transform: rotate3d(-1, 0, 0, 180deg); } 50% { background: red; -moz-transform: rotate3d(0, 0, -1, -180deg); -ms-transform: rotate3d(0, 0, -1, -180deg); -webkit-transform: rotate3d(0, 0, -1, -180deg); transform: rotate3d(0, 0, -1, -180deg); } 75% { background: red; -moz-transform: rotate3d(0, -1, 0, 180deg); -ms-transform: rotate3d(0, -1, 0, 180deg); -webkit-transform: rotate3d(0, -1, 0, 180deg); transform: rotate3d(0, -1, 0, 180deg); } 100% { background: red; -moz-transform: rotate3d(0, -1, 0, 360deg); -ms-transform: rotate3d(0, -1, 0, 360deg); -webkit-transform: rotate3d(0, -1, 0, 360deg); transform: rotate3d(0, -1, 0, 360deg); } 12.5%, 37.5%, 65.5%, 87.5% { background: #cc0000; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <span class="loader"> <span class="loader--element loader--element-1"></span> <span class="loader--element loader--element-2"></span>
</span> <script src="js/index.js"></script>
</body>
</html>
A Pen by Martin Grand - Script Codes CSS Codes
.loader { position: absolute; width: 90px; height: 90px; left: 50%; top: 50%; margin: -50px; -moz-perspective: 180px; -webkit-perspective: 180px; perspective: 180px; -moz-perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%;
}
.loader .loader--element { position: absolute; width: 50%; height: 50%; right: 50%; bottom: 50%; background: red; border-radius: 5px 5px 0 5px; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -moz-animation: loader-rotate 2.5s infinite; -webkit-animation: loader-rotate 2.5s infinite; animation: loader-rotate 2.5s infinite; -moz-animation-timing-function: cubic-bezier(0.25, 0, 0.5, 1.75); -webkit-animation-timing-function: cubic-bezier(0.25, 0, 0.5, 1.75); animation-timing-function: cubic-bezier(0.25, 0, 0.5, 1.75);
}
.loader .loader--element.loader--element-1 { width: 50%; height: 50%;
}
.loader .loader--element.loader--element-2 { width: 25%; height: 25%; -moz-animation-delay: -1.42857s; -webkit-animation-delay: -1.42857s; animation-delay: -1.42857s;
}
@-moz-keyframes loader-rotate { 0% { background: red; -moz-transform: rotate3d(0, 0, 0, 180deg); transform: rotate3d(0, 0, 0, 180deg); } 25% { background: red; -moz-transform: rotate3d(-1, 0, 0, 180deg); transform: rotate3d(-1, 0, 0, 180deg); } 50% { background: red; -moz-transform: rotate3d(0, 0, -1, -180deg); transform: rotate3d(0, 0, -1, -180deg); } 75% { background: red; -moz-transform: rotate3d(0, -1, 0, 180deg); transform: rotate3d(0, -1, 0, 180deg); } 100% { background: red; -moz-transform: rotate3d(0, -1, 0, 360deg); transform: rotate3d(0, -1, 0, 360deg); } 12.5%, 37.5%, 65.5%, 87.5% { background: #cc0000; }
}
@-webkit-keyframes loader-rotate { 0% { background: red; -webkit-transform: rotate3d(0, 0, 0, 180deg); transform: rotate3d(0, 0, 0, 180deg); } 25% { background: red; -webkit-transform: rotate3d(-1, 0, 0, 180deg); transform: rotate3d(-1, 0, 0, 180deg); } 50% { background: red; -webkit-transform: rotate3d(0, 0, -1, -180deg); transform: rotate3d(0, 0, -1, -180deg); } 75% { background: red; -webkit-transform: rotate3d(0, -1, 0, 180deg); transform: rotate3d(0, -1, 0, 180deg); } 100% { background: red; -webkit-transform: rotate3d(0, -1, 0, 360deg); transform: rotate3d(0, -1, 0, 360deg); } 12.5%, 37.5%, 65.5%, 87.5% { background: #cc0000; }
}
@keyframes loader-rotate { 0% { background: red; -moz-transform: rotate3d(0, 0, 0, 180deg); -ms-transform: rotate3d(0, 0, 0, 180deg); -webkit-transform: rotate3d(0, 0, 0, 180deg); transform: rotate3d(0, 0, 0, 180deg); } 25% { background: red; -moz-transform: rotate3d(-1, 0, 0, 180deg); -ms-transform: rotate3d(-1, 0, 0, 180deg); -webkit-transform: rotate3d(-1, 0, 0, 180deg); transform: rotate3d(-1, 0, 0, 180deg); } 50% { background: red; -moz-transform: rotate3d(0, 0, -1, -180deg); -ms-transform: rotate3d(0, 0, -1, -180deg); -webkit-transform: rotate3d(0, 0, -1, -180deg); transform: rotate3d(0, 0, -1, -180deg); } 75% { background: red; -moz-transform: rotate3d(0, -1, 0, 180deg); -ms-transform: rotate3d(0, -1, 0, 180deg); -webkit-transform: rotate3d(0, -1, 0, 180deg); transform: rotate3d(0, -1, 0, 180deg); } 100% { background: red; -moz-transform: rotate3d(0, -1, 0, 360deg); -ms-transform: rotate3d(0, -1, 0, 360deg); -webkit-transform: rotate3d(0, -1, 0, 360deg); transform: rotate3d(0, -1, 0, 360deg); } 12.5%, 37.5%, 65.5%, 87.5% { background: #cc0000; }
}
A Pen by Martin Grand - Script Codes JS Codes
// Loader for Akriel
Developer | Martin Grand |
Username | martingrand |
Uploaded | August 11, 2022 |
Rating | 4.5 |
Size | 3,261 Kb |
Views | 42,504 |
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 captcha concept | 2,723 Kb |
Pure css rain | 4,855 Kb |
Birthday Cake | 3,047 Kb |
Coming soon page for pixelbrain.io | 4,794 Kb |
The easiest way to centering a fluid element vertically, and horizontally | 1,817 Kb |
Seconds counter | 4,152 Kb |
Pure css loader | 3,918 Kb |
3d mosaic, with any image from your computer | 12,990 Kb |
Clock | 3,520 Kb |
Switch | 3,122 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 |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Simple Weather App | Cmwebby | 0 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Full page table inside the grid | Twikito | 1,864 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
CSS3 Media Queries demo | Machal | 1,824 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!