A Pen by Kevin Jannis

Developer
Size
3,280 Kb
Views
40,480

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 Previews

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
*/
A Pen by Kevin Jannis - Script Codes
A Pen by Kevin Jannis - Script Codes
Home Page Home
Developer Kevin Jannis
Username kevinjannis
Uploaded August 25, 2022
Rating 4.5
Size 3,280 Kb
Views 40,480
Do you need developer help for A Pen by Kevin Jannis?

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!

Kevin Jannis (kevinjannis) Script Codes
Create amazing blog posts 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!