CSS3 Simple Moving Background
How do I make an css3 simple moving background?
I used Animation property to change background color & position within 4 seconds.. What is a css3 simple moving background? How do you make a css3 simple moving background? This script and codes were developed by Stathis Nikolaidis on 30 August 2022, Tuesday.
CSS3 Simple Moving Background - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Simple Moving Background</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="js/index.js"></script>
</body>
</html>
CSS3 Simple Moving Background - Script Codes CSS Codes
body{ background-color:#000; background:url(http://stathis-nikolaidis.com/images/bg3.png) bottom #000; -webkit-animation: myfirst 4s infinite alternate; /* Chrome, Safari, Opera */ -moz-animation: myfirst 4s infinite alternate;/* Mozilla 5.0 */ -o-animation: myfirst 4s infinite alternate;/* Opera 12.0 */ animation: myfirst 4s infinite alternate;
}
/* Standard syntax */
@keyframes myfirst { 0% {background-color:#000;} 100% {background-color:#fdd42f;background-position: top;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst { 0% {background-color:#000;} 100% {background-color:#fdd42f;background-position: top;}
}
/* Mozilla 5.0 */
@-moz-keyframes myfirst { 0% {background-color:#000;} 100% {background-color:#fdd42f;background-position: top;}
}
/* Opera 12.0 */
@-o-keyframes myfirst { 0% {background-color:#000;} 100% {background-color:#fdd42f;background-position: top;}
}
CSS3 Simple Moving Background - Script Codes JS Codes
/*
Moving Background
I needed a moving background for my personal website (stathis-nikolaidis.com) and my blog, so i coded this by using css3 animation property!
For more chech out blog.stathis-nikolaidis.com
*/
Developer | Stathis Nikolaidis |
Username | stathisnikolaidis |
Uploaded | August 30, 2022 |
Rating | 3 |
Size | 1,910 Kb |
Views | 34,408 |
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 |
CSS Pseudo-Elements | 2,245 Kb |
Right Sidebar List | 2,164 Kb |
CSS3 Rounded Corners | 1,726 Kb |
CSS3 Change Text Selection Colour | 1,902 Kb |
CSS3 Bottle Lifts Up on Hover | 2,993 Kb |
CSS3 8bit Cristiano Ronaldo | 4,860 Kb |
CSS3 Rising Sun | 2,200 Kb |
Matrix | 1,922 Kb |
Simple CSS3 Social Icons | 1,928 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 |
03 - CSS Variables | Run-time | 2,682 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
Social.svg.min | Larsenwork | 13,849 Kb |
Border-radius animation | Yukulele | 2,480 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Next Word Predictor | Rfalor | 2,776 Kb |
Testing Portfolio Page | Sideshowli | 3,395 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!