Snowing Effect

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
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>
 
Joined
May 18, 2023
Messages
1
Reaction score
0
I think there's an issue with the image's urls, try saving the images in a folder (I named the folder img) and call them this way, also there was a typo in the animation property, the last value is infinite but you had it as indefinite

Code:
 .box{
 display: grid;
 place-items: center;
 width: 100%;
 height: 100%;
 position: absolute;
 background: url(./img/1.png), url(./img/2.png), url(./img/3.png);
 animation: animate 20s linear infinite;
 }
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,792
Messages
2,569,639
Members
45,352
Latest member
SherriePet

Latest Threads

Top