CSS3 rainbow ribbon

Developer
Danwarfel
Size
2,129 Kb
Views
4,048
  1. CSS3 rainbow ribbon Previews
  2. CSS3 rainbow ribbon HTML Codes
  3. CSS3 rainbow ribbon CSS Codes

How do I make an css3 rainbow ribbon?

What is a css3 rainbow ribbon? How do you make a css3 rainbow ribbon? This script and codes were developed by Danwarfel on 18 January 2023, Wednesday.

CSS3 rainbow ribbon Previews
IQ Test

CSS3 rainbow ribbon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 rainbow ribbon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon></div>
<div class=ribbon2></div>
</body>
</html>

CSS3 rainbow ribbon - Script Codes CSS Codes

html { font-size: 65%; }
.ribbon, .ribbon2 { height:10px; height: 1rem; background-color:#d13636; background-color:rgba(221,60,77,.95); background-image:-webkit-gradient(linear, 0 0, 100% 0, from(#e75239), color-stop(12.5, #e75239), color-stop(12.5, #ff961c), color-stop(0.25, #ff961c), color-stop(0.25, #ffcc27), color-stop(37.5, #ffcc27), color-stop(37.5, #fce62f), color-stop(0.5, #fce62f), color-stop(0.5, #cde35b), color-stop(62.5, #cde35b), color-stop(62.5, #82cc33), color-stop(0.75, #82cc33), color-stop(0.75, #41bece), color-stop(87.5, #41bece), color-stop(87.5, #049cdb), to(#049cdb)); background-image:-webkit-linear-gradient(left, #e75239 0%, #e75239 12.5, #ff961c 12.5, #ff961c 25%, #ffcc27 25%, #ffcc27 37.5, #fce62f 37.5, #fce62f 50%, #cde35b 50%, #cde35b 62.5, #82cc33 62.5, #82cc33 75%, #41bece 75%, #41bece 87.5, #049cdb 87.5, #049cdb 100%); background-image:-moz-linear-gradient(left, #e75239 0%, #e75239 12.5, #ff961c 12.5, #ff961c 25%, #ffcc27 25%, #ffcc27 37.5, #fce62f 37.5, #fce62f 50%, #cde35b 50%, #cde35b 62.5, #82cc33 62.5, #82cc33 75%, #41bece 75%, #41bece 87.5, #049cdb 87.5, #049cdb 100%); background-image:-o-linear-gradient(left, #e75239 0%, #e75239 12.5, #ff961c 12.5, #ff961c 25%, #ffcc27 25%, #ffcc27 37.5, #fce62f 37.5, #fce62f 50%, #cde35b 50%, #cde35b 62.5, #82cc33 62.5, #82cc33 75%, #41bece 75%, #41bece 87.5, #049cdb 87.5, #049cdb 100%); background-image:linear-gradient(left, #e75239 0%, #e75239 12.5, #ff961c 12.5, #ff961c 25%, #ffcc27 25%, #ffcc27 37.5, #fce62f 37.5, #fce62f 50%, #cde35b 50%, #cde35b 62.5, #82cc33 62.5, #82cc33 75%, #41bece 75%, #41bece 87.5, #049cdb 87.5, #049cdb 100%); background-position:0 0; background-size:800px; width:100%; top:0; left:0; position:absolute;
}
.ribbon:nth-of-type(1) { top: 20px; -webkit-animation: ribbon 10s linear infinite; -moz-animation: ribbon 10s linear infinite; -ms-animation: ribbon 10s linear infinite; -o-animation: ribbon 10s linear infinite; animation: ribbon 10s linear infinite;
}
.ribbon:nth-of-type(2) { top: 40px; -webkit-animation: ribbon 9s linear infinite; -moz-animation: ribbon 9s linear infinite; -ms-animation: ribbon 9s linear infinite; -o-animation: ribbon 9s linear infinite; animation: ribbon 9s linear infinite;
}
.ribbon:nth-of-type(3) { top: 60px; -webkit-animation: ribbon 8s linear infinite; -moz-animation: ribbon 8s linear infinite; -ms-animation: ribbon 8s linear infinite; -o-animation: ribbon 8s linear infinite; animation: ribbon 8s linear infinite;
}
.ribbon:nth-of-type(4) { top: 80px; -webkit-animation: ribbon 7s linear infinite; -moz-animation: ribbon 7s linear infinite; -ms-animation: ribbon 7s linear infinite; -o-animation: ribbon 7s linear infinite; animation: ribbon 7s linear infinite;
}
.ribbon:nth-of-type(5) { top: 100px; -webkit-animation: ribbon 6s linear infinite; -moz-animation: ribbon 6s linear infinite; -ms-animation: ribbon 6s linear infinite; -o-animation: ribbon 6s linear infinite; animation: ribbon 6s linear infinite;
}
.ribbon:nth-of-type(6) { top: 120px; -webkit-animation: ribbon 5s linear infinite; -moz-animation: ribbon 5s linear infinite; -ms-animation: ribbon 5s linear infinite; -o-animation: ribbon 5s linear infinite; animation: ribbon 5s linear infinite;
}
.ribbon:nth-of-type(7) { top: 140px; -webkit-animation: ribbon 4s linear infinite; -moz-animation: ribbon 4s linear infinite; -ms-animation: ribbon 4s linear infinite; -o-animation: ribbon 4s linear infinite; animation: ribbon 4s linear infinite;
}
.ribbon:nth-of-type(8) { top: 160px; -webkit-animation: ribbon 3s linear infinite; -moz-animation: ribbon 3s linear infinite; -ms-animation: ribbon 3s linear infinite; -o-animation: ribbon 3s linear infinite; animation: ribbon 3s linear infinite;
}
.ribbon:nth-of-type(9) { top: 180px; -webkit-animation: ribbon 2s linear infinite; -moz-animation: ribbon 2s linear infinite; -ms-animation: ribbon 2s linear infinite; -o-animation: ribbon 2s linear infinite; animation: ribbon 2s linear infinite;
}
.ribbon:nth-of-type(10) { top: 200px; -webkit-animation: ribbon 1s linear infinite; -moz-animation: ribbon 1s linear infinite; -ms-animation: ribbon 1s linear infinite; -o-animation: ribbon 1s linear infinite; animation: ribbon 1s linear infinite;
}
.ribbon:nth-of-type(11) { top: 220px; -webkit-animation: ribbon 2s linear infinite; -moz-animation: ribbon 2s linear infinite; -ms-animation: ribbon 2s linear infinite; -o-animation: ribbon 2s linear infinite; animation: ribbon 2s linear infinite;
}
.ribbon:nth-of-type(12) { top: 240px; -webkit-animation: ribbon 3s linear infinite; -moz-animation: ribbon 3s linear infinite; -ms-animation: ribbon 3s linear infinite; -o-animation: ribbon 3s linear infinite; animation: ribbon 3s linear infinite;
}
.ribbon:nth-of-type(13) { top: 260px; -webkit-animation: ribbon 4s linear infinite; -moz-animation: ribbon 4s linear infinite; -ms-animation: ribbon 4s linear infinite; -o-animation: ribbon 4s linear infinite; animation: ribbon 4s linear infinite;
}
.ribbon:nth-of-type(14) { top: 280px; -webkit-animation: ribbon 5s linear infinite; -moz-animation: ribbon 5s linear infinite; -ms-animation: ribbon 5s linear infinite; -o-animation: ribbon 5s linear infinite; animation: ribbon 5s linear infinite;
}
.ribbon:nth-of-type(15) { top: 300px; -webkit-animation: ribbon 6s linear infinite; -moz-animation: ribbon 6s linear infinite; -ms-animation: ribbon 6s linear infinite; -o-animation: ribbon 6s linear infinite; animation: ribbon 6s linear infinite;
}
.ribbon:nth-of-type(16) { top: 320px; -webkit-animation: ribbon 7s linear infinite; -moz-animation: ribbon 7s linear infinite; -ms-animation: ribbon 7s linear infinite; -o-animation: ribbon 7s linear infinite; animation: ribbon 7s linear infinite;
}
.ribbon:nth-of-type(17) { top: 340px; -webkit-animation: ribbon 8s linear infinite; -moz-animation: ribbon 8s linear infinite; -ms-animation: ribbon 8s linear infinite; -o-animation: ribbon 8s linear infinite; animation: ribbon 8s linear infinite;
}
.ribbon:nth-of-type(18) { top: 360px; -webkit-animation: ribbon 9s linear infinite; -moz-animation: ribbon 9s linear infinite; -ms-animation: ribbon 9s linear infinite; -o-animation: ribbon 9s linear infinite; animation: ribbon 9s linear infinite;
}
.ribbon:nth-of-type(19) { top: 380px; -webkit-animation: ribbon 10s linear infinite; -moz-animation: ribbon 10s linear infinite; -ms-animation: ribbon 10s linear infinite; -o-animation: ribbon 10s linear infinite; animation: ribbon 10s linear infinite;
}
.ribbon2 { top: 400px; -webkit-animation: ribbon2 1.5s linear infinite; -moz-animation: ribbon2 1.5s linear infinite; -ms-animation: ribbon2 1.5s linear infinite; -o-animation: ribbon2 1.5s linear infinite; animation: ribbon2 1.5s linear infinite; height: 30rem;
}
@-moz-keyframes ribbon { 0% { background-position: 0 bottom; } 100% { background-position: 1600px bottom; }
}
@-webkit-keyframes ribbon { 0% { background-position: 0 bottom; } 100% { background-position: 1600px bottom; }
}
@-webkit-keyframes ribbon { 0% { background-position: 0 bottom; } 100% { background-position: 1600px bottom; } }
@-moz-keyframes ribbon2 { 0% { background-position: 0 bottom; } 100% { background-position: -1600px bottom; }
}
@-webkit-keyframes ribbon2 { 0% { background-position: 0 bottom; } 100% { background-position: -1600px bottom; }
}
@-webkit-keyframes ribbon2 { 0% { background-position: 0 bottom; } 100% { background-position: -1600px bottom; } }
CSS3 rainbow ribbon - Script Codes
CSS3 rainbow ribbon - Script Codes
Home Page Home
Developer Danwarfel
Username danwarfel
Uploaded January 18, 2023
Rating 3
Size 2,129 Kb
Views 4,048
Do you need developer help for CSS3 rainbow ribbon?

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!

Danwarfel (danwarfel) Script Codes
Name
Experimental Landing Page
Fullscreen Menu With Hamburger Icon
Delusid Homepage
Fly-In Menu
Sticky Nav Demo
SCSS Simple Animated Drop-In
A Pen by danwarfel
Full-Screenery
Breathing Honeycomb
Figured - a bookmarklet to peek under the Allihoopa hood
Create amazing Facebook ads 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!