تاخیر در تغییر رنگ -- قابلیت Css بسیار زیبا (سوال)

kasra22

تازه وارد
سلام و عرض ادب ! یه سوالی داشتم ! خواستم اگه بدونید به منم یاد بدید ، در بعضی سایت ها نمیدونم دیدین یا نه ، تمامی کارها با کمی تاخیر انجام میشه ! مثلا عوض شدن رنگ لینک ها با قرار گرفتن موس ! که همیشه آنی هستش ولی در بعضی سایت ها با کمی وقت بردن انجام میشه و خیلی زیباتر نشون میده

خواستم بدون بلد هستید یا نه ! تشکر و سپاس

 

homayon574

کاربر عضو
همونطور که گفتید یکی از امکانات css3.0 هستش برای اینکه به زیبایی و قابلیت های جدید css3.0 آشنا بشین یه مثال که خودم دیشب براتون درست کردم میزنم و توش از تمام خواص مورد توجه css3.0 استفاده کردم :53: ولی کدی که شما در جستجوشی اسمش transition css3.0 i هستش کمی تو گوگل جستجو کنید میتونید پیداش کنید عزیز ولی استفاده ازش کار هر کس نیست :)


کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>test css3</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
        body {
                text-align:center;
                background: #d2ff52;
                background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842));
                background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%);
                background: -o-linear-gradient(top, #d2ff52 0%,#91e842 100%);
                background: -ms-linear-gradient(top, #d2ff52 0%,#91e842 100%);
                background: linear-gradient(top, #d2ff52 0%,#91e842 100%);
            }
            div.animation {
                color: #000;
                background: #ccc;
                padding: 25px;
                width:150px;
                text-decoration:none;
                margin:250px auto;
                border:1px solid orange;
                font:50px arial;
                -webkit-transition: all 1s linear;
                -moz-transition: all 1s linear;
                transition: all 1s linear;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px; 
            }
            div.animation:hover {
                 color: yellow;
                 background: orange;
                 margin-top:150px;
                 margin-bottom:320px;
                 border:5px solid green;
                 webkit-box-shadow: 25px 25px 50px #555;
                -moz-box-shadow: 25px 25px 50px #555;
                box-shadow: 25px 25px 50px #555; 
                text-shadow: 10px 10px 10px #000;
                -moz-transform: scale(2) rotate(720deg);
                -webkit-transform: scale(2) rotate(720deg);
                -o-transform: scale(2) rotate(720deg);
                -ms-transform: scale(2) rotate(720deg);
                transform: scale(2) rotate(720deg);
                -webkit-border-radius: 75px;
                -moz-border-radius: 75px;
                border-radius: 75px;
            }
        </style>
    </head>
    <body>


        <div class='animation'>آزمایشی</div>

    </body>

</html>
 
آخرین ویرایش توسط مدیر:

kasra22

تازه وارد
واقعا ممنون از لطفتون ! ولی چیزی که من دنبالش میگردم مثلا اینه

a:hover

وقتی موس میره روی لینک ، خواصی که به استایل لینک دادیم مثلا 2 ثانیه طول بکشه

مثلا اگه دادیم که در a:hover رنگ لینک عوض بشه ، 2 ثانیه طول بکشه یعنی آروم آروم تغییر رنگ کنه

بازم ممنون

 

homayon574

کاربر عضو
واقعا ممنون از لطفتون ! ولی چیزی که من دنبالش میگردم مثلا اینهa:hover

وقتی موس میره روی لینک ، خواصی که به استایل لینک دادیم مثلا 2 ثانیه طول بکشه

مثلا اگه دادیم که در a:hover رنگ لینک عوض بشه ، 2 ثانیه طول بکشه یعنی آروم آروم تغییر رنگ کنه

بازم ممنون
hover یعنی هر وقت موس رفت رو اون قسمت نمایش داده بشه به کدی که دادم خوب دقت کنید چیزی که میخواستید توش بود !!!!! :-"


کد:
 <style>             div.animation {
color:black;
 -webkit-transition: all 2s linear;                 -moz-transition: all 2s linear;                 transition: all 2s linear;                            }             div.animation:hover {                  color: yellow;             }         </style>
:77:

 
بالا