Yay for blend-modes

Developer
Andreas Neeven
Size
2,443 Kb
Views
24,288
  1. Yay for blend-modes Previews
  2. Yay for blend-modes HTML Codes
  3. Yay for blend-modes CSS Codes

How do I make an yay for blend-modes?

Blend-modes are fancy! Just wanted to make something to try it out.. What is a yay for blend-modes? How do you make a yay for blend-modes? This script and codes were developed by Andreas Neeven on 18 September 2022, Sunday.

Yay for blend-modes Previews
IQ Test

Yay for blend-modes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Yay for blend-modes</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">	<div class="circle circle-1"></div>	<div class="circle circle-2"></div>	<div class="circle circle-3"></div>	<div class="circle circle-4"></div>	<div class="circle circle-5"></div>	<div class="circle circle-6"></div>
</div>
</body>
</html>

Yay for blend-modes - Script Codes CSS Codes

body { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.wrapper { position: relative; top: -75px; left: -75px;
}
.circle { position: absolute; width: 150px; height: 150px; border-radius: 50%; mix-blend-mode: multiply; opacity: 0.9;
}
.circle.circle-1 { background-color: #1abc9c; -webkit-animation: move1 5s linear infinite; animation: move1 5s linear infinite;
}
.circle.circle-2 { background-color: #2ecc71;
}
.circle.circle-3 { background-color: #3498db; -webkit-animation: move2 5s linear infinite; animation: move2 5s linear infinite;
}
.circle.circle-4 { background-color: #9b59b6; -webkit-animation: move3 5s linear infinite; animation: move3 5s linear infinite;
}
.circle.circle-5 { background-color: #f1c40f; -webkit-animation: move4 5s linear infinite; animation: move4 5s linear infinite;
}
.circle.circle-6 { background-color: #e74c3c; -webkit-animation: move5 5s linear infinite; animation: move5 5s linear infinite;
}
@-webkit-keyframes move1 { 0% { left: 0px; } 25% { left: -50px; } 50% { left: 0px; } 75% { left: 50px; } 100% { left: 0px; }
}
@keyframes move1 { 0% { left: 0px; } 25% { left: -50px; } 50% { left: 0px; } 75% { left: 50px; } 100% { left: 0px; }
}
@-webkit-keyframes move2 { 0% { left: 0px; } 25% { left: -25px; } 50% { left: 0px; } 75% { left: 25px; } 100% { left: 0; }
}
@keyframes move2 { 0% { left: 0px; } 25% { left: -25px; } 50% { left: 0px; } 75% { left: 25px; } 100% { left: 0; }
}
@-webkit-keyframes move3 { 0% { left: 0px; } 25% { left: 25px; } 50% { left: 0px; } 75% { left: -25px; } 100% { left: 0px; }
}
@keyframes move3 { 0% { left: 0px; } 25% { left: 25px; } 50% { left: 0px; } 75% { left: -25px; } 100% { left: 0px; }
}
@-webkit-keyframes move4 { 0% { left: 0px; } 25% { left: 50px; } 50% { left: 0px; } 75% { left: -50px; } 100% { left: 0px; }
}
@keyframes move4 { 0% { left: 0px; } 25% { left: 50px; } 50% { left: 0px; } 75% { left: -50px; } 100% { left: 0px; }
}
@-webkit-keyframes move5 { 0% { left: 0px; } 25% { left: 75px; } 50% { left: 0; } 75% { left: -75px; } 100% { left: 0px; }
}
@keyframes move5 { 0% { left: 0px; } 25% { left: 75px; } 50% { left: 0; } 75% { left: -75px; } 100% { left: 0px; }
}
Yay for blend-modes - Script Codes
Yay for blend-modes - Script Codes
Home Page Home
Developer Andreas Neeven
Username aneeven
Uploaded September 18, 2022
Rating 4
Size 2,443 Kb
Views 24,288
Do you need developer help for Yay for blend-modes?

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!

Andreas Neeven (aneeven) Script Codes
Name
Custom Profile
Flexbox grow, shrink and basis
Menubar blur content
SVG Heart Animation
Some card animation
Flexbox Order
Spinning Loader
Sass loop
Fun stuff with transforms, transitions and border radius
Yet another card...
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!