|
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>transitons</title> <style type="text/css"> .transitions{ background:#000; color:#fff; width:500px; line-hight:50px; height:100px; -moz-transition: background-color 2s linear; -o-transition:background-color 2s linear; -webkit-transition:background-color 2s linear; } .transitions:hover{ background:#f00;} .test2{ background:#000; color:#f00; width:500px; height:50px; line-height:50px; -webkit-transition-property:background-color; -webkit-transition-duration:4s,1s; //使用最后一个值 -webkit-transition-timing-function:linear; -moz-transition-property:background-color; -moz-transition-duration:4s,1s;//使用第一个值 -moz-transition-timing-function:linear; -o-transition-propery:background-color; -o-transition-duration:5s,1s;//使用第一个值 -o-transition-timing-function:linear; } .test2:hover{ background-color:#fff; } .test3{ color:#f00; background-color:#00F; width:500px; height:50px; -o-transition:background-color 2s linear,color 2s linear,width 2s linear,height 2s linear; -webkit-transition:background-color 2s linear,color 2s linear, width 2s linear,height 2s linear; -moz-transition:background-color 2s linear, color 2s linear,width 2s linear,height 2s linear; } .test3:hover{ width:200px; height:200px; color:#000; background-color:#f00;} .test4{ padding:5px; line-height:24px; color:#f00; background-color:#00F; width:100%; background-image:url(../huaban/img/default_pin_bg.gif); -o-transition:background-color 2s linear,color 2s linear,width 2s linear,height 2s linear,background-image 2s linear; -webkit-transition:background-color 2s linear,color 2s linear, width 2s linear,height 2s linear,background-image 2s linear; -moz-transition: background-color 2s linear,color 2s linear,width 2s linear,height 2s linear,background-image 2s linear; } .test4:hover{ width:400px; color:#000; background-color:#f00; background-image:url(../huaban/img/login_or.png)} .test5 img{ position:absolute; top:500px; left:0; -webkit-transform:rotate(0deg); -webkit-transition:left 2s linear,-webkit-transform 2s linear; -moz-transform:rotate(0deg); -moz-transition:left 2s linear,-moz-transform 2s linear; -o-transform:rotate(0deg); -o-transition:left 2s linear,-o-transform 2s linear; } .test5:hover img{ position:absolute; left:100px; -webkit-transform:rotate(720deg); -moz-transform:rotate(720deg); -o-transform:rotate(720deg); } </style> </head> <body> <div class="transitions"> <h1>实验文字变色</h1> my name is Wu Qianqian </div> <div class="test2"> <h1>试验文字底色变为底色类似变无的感觉</h1> hello </div> <div class="test3"> <h1>宽高度大小的改变。实现缩放隐藏效果，平滑渐变</h1> how old are you</div> <div class="test4"> <h1>transition:property duration timing-function 背景图片的改变</h1> <ol> <li>propery：表示对那个属性进行平滑过渡的</li> <li>duration：表示平滑过渡的时间</li> <li>timing-function：表示通过什么方法进行平滑过渡</li> </ol></div> <div class="test5"> <h1>图片的旋转滚动效果，利用定位距离的属性和旋转角度的属性</h1> <img src="../huaban/img/apple-touch-icon-iphone4.png" /> </div> </body> </html> (责任编辑：admin) |