לפעמים בא לנו שמשהו יזוז לנו ברקע אבל לא וידאו שמאד מכביד, וגם לפעמים לא בא לנו על פתיתי השלג המוכרים. ישנה אפשרות נוספת כמובן
באתר אחד יצרתי תמונות של כדורים בגדלים שונים ושקיפויות שונות עם רקע שקוף מאחורה כדי שלא יצמדו. בקוד מוגדרים כרגע 4 כדורים. וניתן לשחק במיקומים בהגדרות של הקוד עצמו כדי שכל כדור ירחף למקום אחר. בקיפריים מוגדר ב 4 שלבים של האנימציה, מיקום של כל אחד מהכדורים כשיש לכל אחד מיקום התחלתי ומיקום סופי [2 מספרים]. אפשר לשחק במיקומים האלה.
אחרי שיצרתי והעליתי, הכנסתי את הקוד הבא כשאת הקישורים של התמונות לקחתי מלשונית המדיה. לאיזור שאני רוצה שיהיו בו כדורים מרחפים נתתי קלאס snow-bg
.snow-bg {
position: relative;
}
.snow-bg:after {
content: '';
display: block;
position: absolute;
z-index: 0 !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url(https://your-domain-full-path/ball1.png), url(https://your-domain-full-path/ball2.png), url(https://your-domain-full-path/ball3.png), url(https://your-domain-full-path/ball4.png);
animation: snow 10s linear infinite alternate;
}
@keyframes snow {
0% {background-position: 900px 700px, 1200px 600px, 400px 600px, 1000px 500px;}
30% {background-position: 1000px 500px, 1000px 800px, 1000px 1200px, 1800px 950px;}
60% {background-position: 1800px 950px, 900px 700px, 1800px 950px, 1500px 1000px;}
100% {background-position: 1500px 1000px, 1000px 700px, 1500px 1000px, 900px 700px;}
}
Code language: CSS (css)