<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> li{width:100px;height:100px;background-color:#003399;list-style:none;color:#fff; transition: all 2s linear;margin-bottom:10px; } li.linear_translate:hover{ transform:translate(20px,30px); /*平移属性*/ } li.ease_skew:hover{ /*transform:skew(30deg,30deg);*/ transform:skew(30deg); transform:skew(0deg,30deg);/*倾斜属性*/ } li.easeIn_scale:hover{ transform:scale(2,.5); /*缩放属性*/ } li.easeOut_rotate:hover{ transform:rotate(30deg); /*旋转属性*/ } </style> </head> <body> <ul> <li class="linear_translate">平移属性</li> <li class="ease_skew">斜切属性</li> <li class="easeIn_scale">缩放属性</li> <li class="easeOut_rotate">旋转属性</li> </ul> </body> </html>
案例二：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.min.js"></script> <style> img{width:300px;height:300px;cursor:pointer; -webkit-transition: all 2s .2s ease-in-out; -moz-transition: all 2s .2s ease-in-out; -ms-transition: all 2s .2s ease-in-out; -o-transition: all 2s .2s ease-in-out; transition: all 2s .2s ease-in-out; } .img1{position:absolute;opacity:0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .bannerWrap:hover .img1{ opacity:1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .bannerWrap:hover .img2{ -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } </style> </head> <body> <div class="bannerWrap"> <img class="img img1" src="1.jpg" alt="" /> <img class="img img2" src="2.jpg" alt="" /> </div> </body> </html>