Rainbow Pride Slide

Developer
Anya Craig
Size
1,705 Kb
Views
32,384
  1. Rainbow Pride Slide Previews
  2. Rainbow Pride Slide HTML Codes
  3. Rainbow Pride Slide CSS Codes

How do I make an rainbow pride slide?

Animating the background-position on text, using background-clip: text and keyframes.. What is a rainbow pride slide? How do you make a rainbow pride slide? This script and codes were developed by Anya Craig on 27 October 2022, Thursday.

Rainbow Pride Slide Previews
IQ Test

Rainbow Pride Slide - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rainbow Pride Slide</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Paytone+One" rel="stylesheet">
<h1>PRIDE</h1>
</body>
</html>

Rainbow Pride Slide - Script Codes CSS Codes

body { background: black;
}
h1 { margin-top: 15%; line-height: 180px; font-size: 180px; font-family: 'Paytone One', sans-serif; text-align: center; background: linear-gradient( to right, #ff1616, #ff7716, #ffdc16, #36c945, #10a5ce, #0f0096, #a51eff, #ff1616); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 800px; background-position: center 0%; animation: background-slide 25s infinite linear;
}
@keyframes background-slide { 100% { background-position: -8160px; }
}
Rainbow Pride Slide - Script Codes
Rainbow Pride Slide - Script Codes
Home Page Home
Developer Anya Craig
Username AnyaCraig
Uploaded October 27, 2022
Rating 4
Size 1,705 Kb
Views 32,384
Do you need developer help for Rainbow Pride Slide?

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!

Anya Craig (AnyaCraig) Script Codes
Name
Hover Effect Hodge-Podge
Bee flight animation using Snap.svg
Overlay Hover Effect
Border-image for Frames
Maple Blossom
Fancy Two-Border Buttons
Hover zoom on a background image
Pawprints animation
Responsive Image Height Test
Animating background foofs
Create amazing captions 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!