طراحی باکس انیمیشن جذاب با المنتور

سلام دوستان در این آموزش امروز قرار با همدیگه یک طراحی باکس انیمیشن جذاب با المنتور داشته باشیم . برای استفاده از این آموزش شما به المنتور پرو احتیاج دارید. کد های CSS را برای شما قرار دادیم تا نیازی به کد نویسی نداشته باشید. ابعاد استفاده شده در این آموزش می تواند بسته به نیاز شما تغییر کنند.ابعادی که در آموزش استفاده شده است صرفا جهت نمایش بهتر این باکس انتخاب شده ، شما می توانید استایل های استفاده شده در آموزش را نسبت به طرح خود شخصی سازی نمایید .

ما در این آموزش از حالت فلکس باکس کانتینر در المنتور استفاده کرده ایم . که شما ابتدا باید این حالت را از قسمت تنظیمات المنتور فعال کنید ، سپس شروع به اجرای این انیمیشن باکس جذاب نمایید. ما در این آموزش از المنتور پرو استفاده کرده ایم و کد های CSS خود را در بخش CSS سفارشی قرار دادیم شما هم برای سهولت کار بهتر است که از نسخه المنتور پرو استفاده نمایید .

همچنین برای دریافت تازه ترین آموزش های ما در شبکه های مجازی می توانید ما را در صفحه اینستاگرام دنبال کنید . همچنین از طریق صفحه تماس با ما با مشاورین ما در امر طراحی وب سایت برای کسب و کار خود به صورت رایگان مشاوره بگیرید.

کد های CSS:

    selector{
        --animated-color-1: #00ccff;
        --animated-color-2: #d400d4;
        --background-color: #162052;
        --border-width: 100px;
        --c-height: 400px;
    }
    selector{
        height: var(--c-height);
    }
    selector:before{
        content: "";
        position: absolute;
        inset: -10px var(--border-width);
        background: linear-gradient(315deg, var(--animated-color-1), var(--animated-color-2));
        width: auto;
        height: auto;
        transition: all .3s;
        animation: animate 4s linear infinite;
    }
    @keyframes animate{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
    selector:after{
        background: var(--background-color);
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: 50%;
        z-index: 1;
    }
    selector:hover:before{
        inset: -20px 0px;
    }
    selector .content-section{
        height: 350px;
        width: 350px;
    }
    selector img{
        transition: all .5s;
    }
    selector:hover img{
        opacity: 0;
    }
    selector .elementor-widget-image{
        pointer-events: none;
    }
    /*Responsive*/
    @media (max-width: 767px) {
    selector{
        height: 350px;
    }
    selector .content-section{
        height: 320px;
        width: 320px;
    }
    }

selector{

--animated-color-1: #00ccff;

--animated-color-2: #d400d4;

--background-color: #162052;

--border-width: 100px;

--c-height: 400px;

}

selector{

height: var(--c-height);

}

selector:before{

content: "";

position: absolute;

inset: -10px var(--border-width);

background: linear-gradient(315deg, var(--animated-color-1), var(--animated-color-2));

width: auto;

height: auto;

transition: all .3s;

animation: animate 4s linear infinite;

}

@keyframes animate{

0%{

transform: rotate(0deg);

}

100%{

transform: rotate(360deg);

}

selector:after{

background: var(--background-color);

content: "";

position: absolute;

inset: 6px;

border-radius: 50%;

z-index: 1;

}

selector:hover:before{

inset: -20px 0px;

}

selector .content-section{

height: 350px;

width: 350px;

}

selector img{

transition: all .5s;

}

selector:hover img{

opacity: 0;

}

selector .elementor-widget-image{

pointer-events: none;

}

/*Responsive*/

@media (max-width: 767px) {

selector{

height: 350px;

}

selector .content-section{

height: 320px;

width: 320px;

}

طراحی باکس انیمیشن جذاب با المنتور

کد های CSS:

دیدگاهتان را بنویسید لغو پاسخ

شماره تماس :

ارتباط از طریق WhatsApp

نشانی الکترونیکی ما :

ارتباط از طریق Telegram