ویدیو در آپارات
آموزش ساخت افکت باران در سایت با المنتور وکد css
rain-bg
.rain-bg {
position: relative;
overflow: hidden; /* جلوگیری از بیرون‌زدگی باران */
}
.rain-bg:after {
content: ”;
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image:
url(‘rain1.png’),
url(‘rain2.png’),
url(‘rain3.png’);
background-repeat: repeat; /* تکرار تصاویر در کل صفحه */
animation: rain 5s linear infinite; /* حرکت قطرات */
}
@keyframes rain {
۰% {
background-position: 0px -500px, 50px -400px, 100px -300px;
}
۱۰۰% {
background-position: 0px 500px, 50px 400px, 100px 300px;
}
}
بعد از کلیک وباز شدن عکس – روی عکس راست کلیک کنید و سیو save کنید
آموزش ساخت افکت برف در سایت با المنتور وکد css
snow-bg
.snow-bg { position: relative; } .snow-bg:after { content: ”; display: block; position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
background-image:
url(”),
url(”),
url(”);
animation: snow 1s linear infinite; } @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} }
بعد از کلیک وباز شدن عکس – روی عکس راست کلیک کنید و سیو save کنید
مقاله افزایش سرعت المنتور
ستاره ⭐⭐⭐مارا رنگی کنید
2 پاسخ
هر عکسی را میشه اینجوری حالت ریزش داد؟
بله ولی عکس ها png سایز کوچک در حد ۳۰۰ پیکسل – کد سفارشی هم که gbt کمکت میکند