- Joined
- Apr 24, 2023
- Messages
- 2
- Reaction score
- 0
Hello everyone, it is my first time posting here. I need a little help with an effect I'm trying to copy off of a YouTube video, Click here to see, and I cannot get the animation to work. I have been fiddling with it all day and have had no luck, if anyone can show me what I'm doing wrong or can manage to make this work, I'd really appreciate it.
For a little context I'm using w3schools to test out my code.
My code
For a little context I'm using w3schools to test out my code.
My code
Code:
<!DOCTYPE html>
<html>
<head>
<title>Snow Test</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: grey;
/*
background-image:url("https://img.freepik.com/free-vector/drawn-winter-landscape-wallpaper_23-2148706855.jpg");
*/
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
min-height: 100vh;
}
.box{
display: grid;
place-items: center;
width: 100%;
height: 100%;
position: absolute;
background: url("https://i.postimg.cc/FFxxkWYK/1.png"), url("https://i.postimg.cc/QtR8mk4Y/2.png"), url(https://i.postimg.cc/GpRbSxCH/3.png);
animation:animate 20s linear indefinite;
}
.box h1{
font-family: poppins;
font-style: italic;
font-weight: bold;
text-align: center;
font-size: 70px;
color: white;
text-transform: uppercase;
line-height: 1.2;
padding: 30px;
border: 5px dashed white;
}
@keyframes animate{
0%{background-position: 0 0, 0 0, 0 0;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
</style>
</head>
<body>
<div class="box">
<h1>Snow Fall</h1>
</div>
</body>
</html>