براتی طراح سایت

ساخت افکت برف باران در سایت با کد CSS

مشخصات مقاله:
بروزرسانی: تیر ۱۴۰۴
ساخت افکت برف باران در سایت
فهرست مطالب

rain snow

ویدیو

 

ساخت افکت باران در سایت با المنتور وکد 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;
    overflow: hidden;
}

.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('snow1.png'),
        url('snow2.png'),
        url('snow3.png');
    background-repeat: repeat;
    animation: snow 10s linear infinite;
}

@keyframes snow {
    ۰% {
        background-position: 
            0px 0px, 
            0px 0px, 
            0px 0px;
    }
    ۵۰% {
        background-position: 
            500px 500px, 
            100px 200px, 
            -100px 150px;
    }
    ۱۰۰% {
        background-position: 
            500px 1000px, 
            200px 400px, 
            -100px 300px;
    }
}


بعد از کلیک وباز شدن عکس – روی عکس راست کلیک کنید و سیو save کنید

مقاله مرتبط:  ساخت زیرنویس فارسی برای ویدیو✅

دانلود عکس برف ۱

دانلود عکس برف ۲

دانلود عکس برف ۳


خدمات پشتیبانی سایت


مقاله افزایش سرعت المنتور

ستاره ⭐⭐⭐مارا رنگی کنید

۴/۵ - (۶ امتیاز)

3 پاسخ

    1. بله ولی عکس ها png سایز کوچک در حد ۳۰۰ پیکسل – کد سفارشی هم که gbt کمکت میکند

دیدگاهتان را بنویسید

3 × 2 =