Multi coloured animated css text

Developer
Mandy Michael
Size
2,903 Kb
Views
20,240
  1. Multi coloured animated css text Previews
  2. Multi coloured animated css text HTML Codes
  3. Multi coloured animated css text CSS Codes
  4. Multi coloured animated css text JS Codes

How do I make an multi coloured animated css text?

Css only, multi-coloured, soothing animated beach text (phwoar). Check out some other cool text effects: http://codepen.io/collection/DamKJW/. What is a multi coloured animated css text? How do you make a multi coloured animated css text? This script and codes were developed by Mandy Michael on 16 December 2022, Friday.

Multi coloured animated css text Previews
IQ Test

Multi coloured animated css text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multi coloured animated css text</title> <link href='https://fonts.googleapis.com/css?family=Roboto:900,300' rel='stylesheet' type='text/css'> <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">	<h1 data-heading="Beach" contenteditable>Beach</h1>
</div> <script src="js/index.js"></script>
</body>
</html>

Multi coloured animated css text - Script Codes CSS Codes

html { height: 100%;
}
body { background: #1c8fac; height: 100%;
}
h1 { font-size: 20vw; top: 50%; margin: 0 0 0 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; font-weight: 900; white-space: nowrap; display: inline-block;
}
.wrapper { width: 100%; font-family: 'Roboto', sans-serif; margin: 0 auto; height: 100%;
}
.wrapper h1 { color: #39c3e5;
}
.wrapper h1:before { content: attr(data-heading); position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; height: 60%; color: #82e2fa; -webkit-animation: ocean 3.5s ease-in-out forwards infinite; animation: ocean 3.5s ease-in-out forwards infinite;
}
.wrapper h1:after { content: attr(data-heading); position: absolute; left: 0; top: 0; z-index: 2; overflow: hidden; height: 53%; color: #ffe984; -webkit-animation: sand 3.5s ease-in-out forwards infinite; animation: sand 3.5s ease-in-out forwards infinite;
}
@-webkit-keyframes ocean { 0% { height: 60%; } 50% { height: 50%; } 100% { height: 60%; }
}
@keyframes ocean { 0% { height: 60%; } 50% { height: 50%; } 100% { height: 60%; }
}
@-webkit-keyframes sand { 0% { height: 53%; } 50% { height: 50%; } 100% { height: 53%; }
}
@keyframes sand { 0% { height: 53%; } 50% { height: 50%; } 100% { height: 53%; }
}

Multi coloured animated css text - Script Codes JS Codes

// JS is to make the text editable fot demo purpose, not required for the effect. Thanks for the suggestion @chriscoyier!
var h1 = document.querySelector("h1");
h1.addEventListener("input", function() { this.setAttribute("data-heading", this.innerText);
});
Multi coloured animated css text - Script Codes
Multi coloured animated css text - Script Codes
Home Page Home
Developer Mandy Michael
Username mandymichael
Uploaded December 16, 2022
Rating 4.5
Size 2,903 Kb
Views 20,240
Do you need developer help for Multi coloured animated css text?

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!

Mandy Michael (mandymichael) Script Codes
Name
Three way split with clip-path
Page layout text effects with clip-path
Think outside the div
80s style text with clip path and layered fonts
Layered fonts in css
Lines and layered css text effects
Awkward Zebra Text Effect
CSS Batman Mask
Vertical split layout text effect
Stripy Rainbow Text Effect
Create amazing video scripts 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!