Blobs test
How do I make an blobs test?
Test of blob technic. What is a blobs test? How do you make a blobs test? This script and codes were developed by Jay Salvat on 13 July 2022, Wednesday.
Blobs test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blobs test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="blobs"> <div class="blob"></div> <div class="blob"></div> <div class="blob"></div>
</div>
</body>
</html>
Blobs test - Script Codes CSS Codes
.blobs { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; width: 400px; height: 200px; margin: auto; -webkit-filter: blur(20px) contrast(30); filter: blur(20px) contrast(30);
}
.blob { background: black; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; border-radius: 100%;
}
.blob:first-child { -webkit-animation: left ease-in-out 0.8s infinite alternate backwards; animation: left ease-in-out 0.8s infinite alternate backwards;
}
.blob:nth-child(2) { -webkit-animation: center ease-in-out 1.2s infinite alternate backwards; animation: center ease-in-out 1.2s infinite alternate backwards;
}
.blob:last-child { -webkit-animation: right ease-in-out 2s infinite alternate backwards; animation: right ease-in-out 2s infinite alternate backwards;
}
@-webkit-keyframes left { 0% { -webkit-transform: scale(1.1) translate(-100px, -10px); transform: scale(1.1) translate(-100px, -10px); } 100% { -webkit-transform: translate(-100px, 10px); transform: translate(-100px, 10px); }
}
@keyframes left { 0% { -webkit-transform: scale(1.1) translate(-100px, -10px); transform: scale(1.1) translate(-100px, -10px); } 100% { -webkit-transform: translate(-100px, 10px); transform: translate(-100px, 10px); }
}
@-webkit-keyframes center { 0% { -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1.6); transform: scale(1.6); }
}
@keyframes center { 0% { -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1.6); transform: scale(1.6); }
}
@-webkit-keyframes right { 0% { -webkit-transform: translate(100px, 10px); transform: translate(100px, 10px); } 100% { -webkit-transform: scale(1.1) translate(100px, -10px); transform: scale(1.1) translate(100px, -10px); }
}
@keyframes right { 0% { -webkit-transform: translate(100px, 10px); transform: translate(100px, 10px); } 100% { -webkit-transform: scale(1.1) translate(100px, -10px); transform: scale(1.1) translate(100px, -10px); }
}
Developer | Jay Salvat |
Username | jaysalvat |
Uploaded | July 13, 2022 |
Rating | 3 |
Size | 2,220 Kb |
Views | 50,600 |
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 |
Ezdz quick demo | 2,076 Kb |
HTML5 Breakout | 4,873 Kb |
Easy Face Detection with jQuery | 63,612 Kb |
Apple watch like Mickey watch | 26,341 Kb |
3 state pure CSS animated 3D button | 3,255 Kb |
HTM5 picture dropzone | 2,576 Kb |
A Pen by Jay Salvat | 1,654 Kb |
Mona Lisa with pure CSS | 51,446 Kb |
Ken Burns effect with Vegas 2 | 3,334 Kb |
Buzz - react 1 | 2,705 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 |
Border-radius animation | Yukulele | 2,480 Kb |
Isometric css island | Xaddict | 2,950 Kb |
Test | Dviate | 2,668 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
Blog Concept 2 | JGallardo | 2,994 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
Product item | Mymahesh11 | 2,256 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 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!