Pure CSS Sailboat and Clouds

Developer
Gunnar Guddal
Size
2,201 Kb
Views
8,096
  1. Pure CSS Sailboat and Clouds Previews
  2. Pure CSS Sailboat and Clouds HTML Codes
  3. Pure CSS Sailboat and Clouds CSS Codes

How do I make an pure css sailboat and clouds?

Sailboat (yawl), clouds, and background landscape made with pure CSS. What is a pure css sailboat and clouds? How do you make a pure css sailboat and clouds? This script and codes were developed by Gunnar Guddal on 06 January 2023, Friday.

Pure CSS Sailboat and Clouds Previews
IQ Test

Pure CSS Sailboat and Clouds - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Sailboat and Clouds </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="background"> <div class="cloudone"></div> <div class="cloudtwo"></div> <div class="land"></div> <div class="shape"></div>
</div>
<!---Created using Codepen.io, Clippy from bennettfeely.com, and my own CSS'ing.--->
</body>
</html>

Pure CSS Sailboat and Clouds - Script Codes CSS Codes

.background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; box-sizing: border-box; background: #0cc; overflow: hidden;
}
.shape { position: absolute; display: inline-block; height: 200px; width: 200px; left: 10%; top: 60px; background: #ff5d89; transition: 0.3s all ease; -webkit-animation: moveboat 50s infinite; /* Chrome, Safari, Opera */ animation: moveboat 50s infinite; -webkit-clip-path: polygon(92% 100%, 100% 90%, 71% 6%, 75% 85%, 100% 90%, 70% 90%, 70% 0, 24% 92%, 63% 90%, 17% 89%, 17% 50%, 0 90%, 11% 90%, 23% 100%); clip-path: polygon(92% 100%, 100% 90%, 71% 6%, 75% 85%, 100% 90%, 70% 90%, 70% 0, 24% 92%, 63% 90%, 17% 89%, 17% 50%, 0 90%, 11% 90%, 23% 100%); transition: .3s all ease;
}
.cloudone { position: absolute; display: inline-block; height: 60px; width: 200px; left: 0; top: 18px; background: #fff; -webkit-animation: movecloudone 50s infinite; -webkit-clip-path: polygon(90% 100%, 55% 44%, 44% 60%, 35% 29%, 22% 18%, 15% 69%, 26% 100%); clip-path: polygon(90% 100%, 55% 44%, 44% 60%, 35% 29%, 22% 18%, 15% 69%, 26% 100%);
}
.cloudtwo { position: absolute; display: inline-block; height: 80px; width: 220px; left: 100%; top: 22px; background: #fff; -webkit-animation: movecloudtwo 50s infinite; -webkit-clip-path: polygon(90% 100%, 55% 44%, 44% 60%, 35% 29%, 22% 18%, 15% 69%, 26% 100%);
}
.land { position: absolute; display: inline-block; height: 150px; width: 200%; left: 110%; top: 70px; background: #afa; -webkit-animation: moveland 50s infinite; animation: moveland 50s infinite; -webkit-clip-path: polygon(100% 100%, 0 100%, 0 50%, 11% 0, 14% 19%, 19% 9%, 33% 48%, 39% 35%, 49% 49%, 60% 32%, 66% 52%, 77% 66%, 88% 63%, 100% 52%); clip-path: polygon(100% 100%, 0 100%, 0 50%, 11% 0, 14% 19%, 19% 9%, 33% 48%, 39% 35%, 49% 49%, 60% 32%, 66% 52%, 77% 66%, 88% 63%, 100% 52%);
}
.background:hover .shape { -webkit-clip-path: polygon(50% 100%, 80% 75%, 99% 40%, 100% 25%, 90% 10%, 75% 4%, 60% 10%, 50% 24%, 40% 10%, 25% 4%, 10% 10%, 0 25%, 1% 40%, 20% 75%); clip-path: polygon(50% 100%, 80% 75%, 99% 40%, 100% 25%, 90% 10%, 75% 4%, 60% 10%, 50% 24%, 40% 10%, 25% 4%, 10% 10%, 0 25%, 1% 40%, 20% 75%); animation: heart 1s infinite; left: 40%;
}
@-webkit-keyframes moveboat { 0% { left: 10% } 100% { left: 90%; }
}
@keyframes moveboat { 0% { left: 10%; } 100% { left: 90%; }
}
@-webkit-keyframes moveland { 0% { left: 0% } 100% { left: -100%; }
}
@keyframes moveland { 0% { left: 0%; } 100% { left: -100%; }
}
@-webkit-keyframes movecloudone { 0% { left: 100% } 100% { left: -500px; }
}
@keyframes movecloudone { 0% { left: 100%; } 100% { left: -500px; }
}
@-webkit-keyframes movecloudtwo { 0% { left: 50% } 100% { left: -50px; }
}
@keyframes movecloudtwo { 0% { left: 50%; } 100% { left: -50px; }
}
@-webkit-keyframes heart { 0% { height: 200px; width: 200px; } 50% { height: 210px; width: 210px; } 100% { height: 200px; width: 200px; }
}
@keyframes heart { 0% { height: 200px; width: 200px; } 50% { height: 210px; width: 210px; } 100% { height: 200px; width: 200px; }
}
Pure CSS Sailboat and Clouds - Script Codes
Pure CSS Sailboat and Clouds - Script Codes
Home Page Home
Developer Gunnar Guddal
Username thegunnar
Uploaded January 06, 2023
Rating 3.5
Size 2,201 Kb
Views 8,096
Do you need developer help for Pure CSS Sailboat and Clouds?

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!

Gunnar Guddal (thegunnar) Script Codes
Name
Landing Page 1.1
Marketplace - Home
Classic Soup Landing Page
Simple Landing Page 1.1
Neon Signs
Video Landing Page Skeleton
Pure CSS Clipping Shape
Marketplace - Recipes
Social Feed From Unordered List
Marketplace - Products
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!