Moving bubbles
How do I make an moving bubbles?
What is a moving bubbles? How do you make a moving bubbles? This script and codes were developed by Nummo on 18 December 2022, Sunday.
Moving bubbles - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>moving bubbles</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="bubbles"> <div class="bubble x1"></div> <div class="bubble x2"></div> <div class="bubble x3"></div> <div class="bubble x4"></div> <div class="bubble x5"></div>
</div>
</body>
</html>
Moving bubbles - Script Codes CSS Codes
#bubbles { height: 100% }
body { overflow: hidden }
#bubbles { padding: 100px 0 }
.bubble { width: 60px; height: 60px; background: #ffb200; border-radius: 200px; -moz-border-radius: 200px; -webkit-border-radius: 200px; position: absolute;
}
.x1 { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); opacity: 0.2; -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate; -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x2 { left: 200px; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); opacity: 0.5; -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate; -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate; -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 { left: 350px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); opacity: 0.3; -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate; -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 { left: 470px; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform: scale(0.75); opacity: 0.35; -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 { left: 150px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); opacity: 0.3; -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate; -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate; -o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
@-webkit-keyframes moveclouds { 0% { top: 500px; } 100% { top: -500px; }
}
@-webkit-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; }
}
@-moz-keyframes moveclouds { 0% { top: 500px; } 100% { top: -500px; }
}
@-moz-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; }
}
@-o-keyframes moveclouds { 0% { top: 500px; } 100% { top: -500px; }
}
@-o-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; }
}
Developer | Nummo |
Username | nen |
Uploaded | December 18, 2022 |
Rating | 3 |
Size | 1,833 Kb |
Views | 10,120 |
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 |
Sunset | 8,339 Kb |
Large moving bubbles | 2,427 Kb |
Personal Portfolio Webpage - Nummo | 2,713 Kb |
Pen jar | 1,139 Kb |
Notepad | 1,717 Kb |
Calendar | 1,758 Kb |
Fish | 2,361 Kb |
Clock | 1,878 Kb |
Taco | 1,676 Kb |
Pie | 1,131 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 |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
Countdown with Rings | Ewganoel | 2,490 Kb |
Break Out | AzazelN28 | 12,431 Kb |
Sexy Social Buttons | Ipiyale | 2,226 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
A Pen by Jim Savage | Madebyjam | 2,418 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!