Css text wave
How do I make an css text wave?
CSS demo style text wave.. What is a css text wave? How do you make a css text wave? This script and codes were developed by Kevin Alford on 07 January 2023, Saturday.
Css text wave - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css text wave</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="card_wrapper"> <h1 id="main_heading"> <div id="l1" class="waving">M</div> <div id="l2" class="waving">e</div> <div id="l3" class="waving">r</div> <div id="l4" class="waving">r</div> <div id="l1" class="waving">y</div> <div id="xx" class="waving"> </div> <div id="l2" class="waving">C</div> <div id="l3" class="waving">S</div> <div id="l4" class="waving">S</div> <div id="l1" class="waving">3</div> <div id="l2" class="waving">m</div> <div id="l3" class="waving">a</div> <div id="l4" class="waving">s</div> <div id="l1" class="waving">!</div> </h1>
</div>
</body>
</html>
Css text wave - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Princess+Sofia);
@import url(https://fonts.googleapis.com/css?family=Amatic+SC);
body { background: #222; color: #eee; font-size: 40px; font-family: 'Amatic SC';
}
#card_wrapper { width: 700px; height: 100px; position: relative; margin: 20px auto; /* auto will horizontally center div#card_wrapper*/ background-image: url(/img/card_assets/backgrounds/4.png);
}
#main_heading { position: absolute; left: 80px; text-shadow: 0px 2px 3px rgba(2,2,2,0.5);
}
#main_heading div { position: relative; float: left;
}
.waving { -webkit-animation:sliding 4s infinite; /* Safari and Chrome */ -webkit-animation-timing-function:ease-in-out;
}
#l1 {
-webkit-animation-delay:-1s; /* Safari and Chrome */
}
#l2 {
-webkit-animation-delay:-2s; /* Safari and Chrome */
}
#l3 {
-webkit-animation-delay:-3s; /* Safari and Chrome */
}
#l4 {
-webkit-animation-delay:-4s; /* Safari and Chrome */
}
@-webkit-keyframes sliding /* Safari and Chrome */
{
0% {top:0px;}
50% {top:40px;}
}
Developer | Kevin Alford |
Username | zeroeth |
Uploaded | January 07, 2023 |
Rating | 3 |
Size | 1,906 Kb |
Views | 8,096 |
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 |
How not to code a website | 1,625 Kb |
Advanced Website Design | 3,405 Kb |
Glsl.heroku.com sandbox | 3,347 Kb |
960 grid layout | 2,406 Kb |
Javascript Starfleet Basics | 2,612 Kb |
Marqueeception | 1,666 Kb |
Angle Border | 2,505 Kb |
Processing.js Random Slice | 33,101 Kb |
A CSS trifold valentines. | 8,360 Kb |
Twitter Bootstrap Grids | 2,381 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 |
Fullscreen audio play button | 72 | 2,148 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
Twitch API | Coderpilot | 3,412 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Login with flip 3d animation | Afiq | 3,012 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
Welcome | Nakome | 6,076 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 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!