8 افکت ساده ی transition اما زیبا و کاربردی

طراحی سایت در اصفهان

طراحی سایت در اصفهان

این جا در طراحی وب سایت, زبان CSS3 بسیاری از کارهایی که قبلا انجام داده مشده است که بسیار سخت و ناممکن بود را میتوانید از این پس انجام دهیم و بسیاری از کارهای جالب و حتی شگف انگیز امروزه بسیار راحت انجام میپذیرد.

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

امروزه استفاده و پشتیبانی از این افکت ها بسیار ساده تر شده است و هم اکنون شما میتوانید در طراحی های خود از آن ها استفاده نمایید.

امروز قصد داریم تا 8 افکتی که با خصوصیت transition ساخته میشود را به شما معرفی نماییم.

در ابتدا یک تگ div با خصوصیت های مشترک برای کار خود در نظر میگیریم.

1- افکت FADE IN

طراحی سایت,

.fade
{
        opacity:0.5;
}
.fade:hover
{
        opacity:1;
}

2- افکت CHANGE COLOR

طراحی سایت,

.color:hover
{
        background:#53a7ea;
}

3- افکت GROW & SHRINK

طراحی سایت,

.grow:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}

طراحی سایت,

.shrink:hover
{
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
}

طراحی سایت,
 

4- افکت ROTATE ELEMENT

.rotate:hover
{
        -webkit-transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        transform: rotateZ(-30deg);
}

 
طراحی سایت,

5- افکت SQUARE TO CIRCLE

.circle:hover
{
        border-radius:50%;
}

 
طراحی سایت,

6- افکت 3D SHADOW

.threed:hover
{
        box-shadow:
                1px 1px #53a7ea,
                2px 2px #53a7ea,
                3px 3px #53a7ea;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
}

طراحی سایت,
طراحی سایت,

7- افکت SWING

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.swing:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

طراحی سایت,
 

8- افکت INSET BORDER

.border:hover
{
        box-shadow: inset 0 0 0 25px #53a7ea;
}

طراحی سایت,

طراحی سایت در اصفهان

طراحی سایت ارزان در اصفهان
طراحی سایت ارزان
طراحی سایت در اصفهان
طراحی سایت پوشش
اصفهان سایت