A Pen by Kevin Jannis
How do I make an a pen by kevin jannis?
What is a a pen by kevin jannis? How do you make a a pen by kevin jannis? This script and codes were developed by Kevin Jannis on 25 August 2022, Thursday.
A Pen by Kevin Jannis - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Kevin Jannis</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cloud large cloud-1"> <div></div><div></div><div></div><div></div>
</div>
<div class="cloud normal cloud-2"> <div></div><div></div><div></div><div></div>
</div>
<div class="cloud small cloud-3"> <div></div><div></div><div></div><div></div>
</div>
<div class="cloud tiny cloud-4"> <div></div><div></div><div></div><div></div>
</div>
<div class="cloud large cloud-5"> <div></div><div></div><div></div><div></div>
</div>
<div class="cloud normal cloud-6"> <div></div><div></div><div></div><div></div>
</div>
<div class="cloud small cloud-7"> <div></div><div></div><div></div><div></div>
</div>
<div class="cloud tiny cloud-8"> <div></div><div></div><div></div><div></div>
</div>
<div class="cloud small cloud-9"> <div></div><div></div><div></div><div></div>
</div>
<div class="cloud normal cloud-10"> <div></div><div></div><div></div><div></div>
</div>
<div class="cloud tiny cloud-11"> <div></div><div></div><div></div><div></div>
</div>
<div class="cloud small cloud-12"> <div></div><div></div><div></div><div></div>
</div> <script src="js/index.js"></script>
</body>
</html>
A Pen by Kevin Jannis - Script Codes CSS Codes
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background: #6dd3e7; padding: 100px; overflow-x: hidden;
}
.cloud { -webkit-animation: clouds 60s infinite linear; -moz-animation: clouds 60s infinite linear; -ms-animation: clouds 60s infinite linear; -o-animation: clouds 60s infinite linear; animation: clouds 60s infinite linear; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; position: relative; margin: 33px 0 0 0; width: 54px; height: 5px; background: #f7e7eb;
}
.cloud.tiny { -moz-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5);
}
.cloud.small { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1);
}
.cloud.normal { -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -webkit-transform: scale(2, 2); transform: scale(2, 2);
}
.cloud.large { -moz-transform: scale(4, 4); -ms-transform: scale(4, 4); -webkit-transform: scale(4, 4); transform: scale(4, 4);
}
.cloud div { -moz-box-shadow: inset -2px -3px 0 0 #f7e7eb; -webkit-box-shadow: inset -2px -3px 0 0 #f7e7eb; box-shadow: inset -2px -3px 0 0 #f7e7eb; position: absolute; border-radius: 50%; width: 12px; height: 12px; left: -3px; bottom: 0; background: #fafbf0; z-index: 10;
}
.cloud div:first-child + div { -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -webkit-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); margin: 0 0 4px 13px; z-index: 9;
}
.cloud div:first-child + div + div { -moz-transform: scale(2.4, 2.4); -ms-transform: scale(2.4, 2.4); -webkit-transform: scale(2.4, 2.4); transform: scale(2.4, 2.4); margin: 0 0 9px 32px; z-index: 8;
}
.cloud div:first-child + div + div + div { -moz-transform: scale(1.3, 1.3); -ms-transform: scale(1.3, 1.3); -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); margin: 0 0 2px 50px; z-index: 7;
}
@-webkit-keyframes clouds { 0% { left: -100%; } 100% { left: 120%; }
}
@-moz-keyframes clouds { 0% { left: -100%; } 100% { left: 120%; }
}
@-ms-keyframes clouds { 0% { left: -100%; } 100% { left: 120%; }
}
@keyframes clouds { 0% { left: -100%; } 100% { left: 120%; }
}
.cloud-1 { -webkit-animation-duration: 263s; -moz-animation-duration: 263s; -ms-animation-duration: 263s; -o-animation-duration: 263s; animation-duration: 263s; margin-left: 20%;
}
.cloud-2 { -webkit-animation-duration: 99s; -moz-animation-duration: 99s; -ms-animation-duration: 99s; -o-animation-duration: 99s; animation-duration: 99s; margin-left: 90%;
}
.cloud-3 { -webkit-animation-duration: 142s; -moz-animation-duration: 142s; -ms-animation-duration: 142s; -o-animation-duration: 142s; animation-duration: 142s; margin-left: 50%;
}
.cloud-4 { -webkit-animation-duration: 152s; -moz-animation-duration: 152s; -ms-animation-duration: 152s; -o-animation-duration: 152s; animation-duration: 152s; margin-left: 43%;
}
.cloud-5 { -webkit-animation-duration: 215s; -moz-animation-duration: 215s; -ms-animation-duration: 215s; -o-animation-duration: 215s; animation-duration: 215s; margin-left: 83%;
}
.cloud-6 { -webkit-animation-duration: 139s; -moz-animation-duration: 139s; -ms-animation-duration: 139s; -o-animation-duration: 139s; animation-duration: 139s; margin-left: 73%;
}
.cloud-7 { -webkit-animation-duration: 109s; -moz-animation-duration: 109s; -ms-animation-duration: 109s; -o-animation-duration: 109s; animation-duration: 109s; margin-left: 69%;
}
.cloud-8 { -webkit-animation-duration: 121s; -moz-animation-duration: 121s; -ms-animation-duration: 121s; -o-animation-duration: 121s; animation-duration: 121s; margin-left: 100%;
}
.cloud-9 { -webkit-animation-duration: 101s; -moz-animation-duration: 101s; -ms-animation-duration: 101s; -o-animation-duration: 101s; animation-duration: 101s; margin-left: 10%;
}
.cloud-10 { -webkit-animation-duration: 126s; -moz-animation-duration: 126s; -ms-animation-duration: 126s; -o-animation-duration: 126s; animation-duration: 126s; margin-left: 14%;
}
.cloud-11 { -webkit-animation-duration: 96s; -moz-animation-duration: 96s; -ms-animation-duration: 96s; -o-animation-duration: 96s; animation-duration: 96s; margin-left: 73%;
}
.cloud-12 { -webkit-animation-duration: 83s; -moz-animation-duration: 83s; -ms-animation-duration: 83s; -o-animation-duration: 83s; animation-duration: 83s; margin-left: 51%;
}
A Pen by Kevin Jannis - Script Codes JS Codes
/*
Some cloud animation!
Made by Kevin Jannis (@kevinjannis)
View more at www.janniskev.in
*/
Developer | Kevin Jannis |
Username | kevinjannis |
Uploaded | August 25, 2022 |
Rating | 4.5 |
Size | 3,280 Kb |
Views | 40,480 |
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 |
DC vs. Marvel | 14,862 Kb |
V for Vendetta | 7,249 Kb |
Adjusting your settings. | 2,857 Kb |
Vivid CSS3 Spinner | 3,181 Kb |
The Simpsons Wall Painting | 4,018 Kb |
Random Access Memories | 4,252 Kb |
Simple float label | 3,312 Kb |
Golfing | 3,530 Kb |
Star Wars The Force Awakens Speeder | 9,027 Kb |
Google Chrome logos in CSS | 2,391 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 |
Image grid with captions | Mchernin34 | 2,222 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
Social Profiles | Lachlanjc | 1,939 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Blank Starter | Mhartington | 2,171 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Simple Buttons | Haydenmills | 1,750 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
Tic Tac Toe | Volv | 4,862 Kb |
Flip test | Madhes | 1,635 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!