سایت آموزشی فری لرن
اجرا کن
مشاهده خروجی
<!DOCTYPE html> <html> <head> <style> div{ background-color:#f0005a; width:100px; height:50px; transition-duration: 1s; } .MyBox1{ transition-timing-function:linear; } .MyBox2{ transition-timing-function:ease-in; } .MyBox3{ transition-timing-function:ease-out; } .MyBox4{ transition-timing-function:ease-in-out; } .MyBox5{ transition-timing-function:steps(5,start); } .MyBox6{ transition-timing-function:cubic-bezier(0,0,0.58,1); } .MyBox1:hover,.MyBox2:hover,.MyBox3:hover,.MyBox4:hover,.MyBox5:hover,.MyBox6:hover { width: 100%; } </style> </head> <body> <p><b>لطفا ماوس را بروی باکس زیر ببرید</b></p> <h4>linear</h4> <div class="MyBox1"></div> <h4>ease-in</h4> <div class="MyBox2"></div> <h4>ease-out</h4> <div class="MyBox3"></div> <h4>ease-in-out</h4> <div class="MyBox4"></div> <h4>steps(5,start)</h4> <div class="MyBox5"></div> <h4>cubic-bezier(0,0,0.58,1)</h4> <div class="MyBox6"></div> </body> </html>
اشتراک گذاری
×
کپی آدرس
آدرس با موفقیت کپی شد
