Want create site? Find Free WordPress Themes and plugins.

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

Did you find apk for android? You can find new Free Android Games and apps.
نمای کلی بررسی
حجم مطلب
کیفیت مطلب
کیفیت آموزشی مطلب
کیفیت نگارش
نویسندهسایت اصفهان
منبعسایت اصفهان
اشتراک
مقاله قبلیزبان CSS برای tooltip
مقاله بعدیفونت در CSS3
طراحی سایت پوشش همواره تلاش کرده است تا با بکار گیری جدیدترین و بروز ترین متد های طراحی وب سایت روز دنیا, دست به طراحی انواع پورتال یا وب سایت دولتی,سایت شرکتی,سایت فروشگاهی,سایت خبری,سایت مذهبی,سایت ورزشی,سایت دانلود و بازی,سایت شخصی و حتی طراحی سایت رایگان نماید تا تحولی جدید در دنیای طراحی وبسایت بوجود آورد به گونه ای که دیگر در طراحی های وب سایت پوشش, سایت های معمولی و سه ستونه و دو ستونه و پر زرق و برق قدیمی که حوصله ی هر کاربری را به سر می برد جای خود را به سایت هایی با گرافیک و کیفیت و از همه مهمتر سئوی بالا می دهند و هر کاربری را مجذوب خود کرده و اینگونه است که راندمان کار یک وب سایت بالا رفته و طراحی سایت مورد نظر به هدف خود که رضایت و بازدید بیشتر کاربران است, می رسد.

بدون نظر

نظر دادن