te8 افکت بسیار ساده transition

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    </style>
</head>
<body>
    <div></div>       
</body>
</html>

 

<style type="text/css">
body > div
{
            width:483px;
            height:298px;
            background:#676470;
            transition:all 0.3s ease;
}
</style>

 

۱- افکت FADE IN

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

 

۲- افکت CHANGE COLOR

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

۳- افکت 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);
}

۴- افکت ROTATE ELEMENT

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

 

 

۵- افکت SQUARE TO CIRCLE

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

 

 

۶- افکت ۳D SHADOW

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

 

 

۷- افکت SWING

@-webkit-keyframes swing
{
    ۱۵%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    ۳۰%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    ۵۰%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    ۶۵%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    ۸۰%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    ۱۰۰%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    ۱۵%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    ۳۰%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    ۵۰%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    ۶۵%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    ۸۰%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    ۱۰۰%
    {
        -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;
}

 

 

۸- افکت INSET BORDER

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

 

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

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

طراحی سایت ارزان

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

طراحی سایت پوشش

اصفهان سایت

۸ افکت بسیار ساده transition

پاسخ ترک