transition-property 过渡属性，默认值为all
transition-duration 过渡持续时间，默认时间为0s
transition-timing-function 过渡函数，默认ease函数，还有ease-out（先快后慢）、ease-in（先慢后快）、linear（匀速）等等函数
transition-delay 过渡延迟时间，默认0s
<div class="ceng"> </div>
.ceng{ width:100px; height:100px; background-color:pink; cursor:pointer; transition-duration:2s; transition-property:height; //指定方向，默认all，即所有方向都变化 transition-delay:.1s; transition-timing-function:ease; transition:all 2s .1s ease; //transition 的复合写法 } .ceng:hover{ width:300px; height:150px; background-color:red; /* border-radius:50%;*/ //圆形也可以变化，正方形变成圆形 }
仿天猫专题过渡效果实例
<div class="main"> <ul> <li> <div class="m_title"> 手机馆 </div> <div class='m_content'> R9s Plus最新上线 </div> <div class="m_img"> <img src="./r9s,jpg" alt="手机"> </div> </li> </ul> </div>
*{ padding:0px; margin:0px; front-family:'Microshoft YaHei'; } .main{ margin:10px auto; width:230px; border:1px solid #ccc; text-align:center; } .main li{ list-style:none; cursor:pointer; //鼠标三角形状变成手形 } .m_title{ front-size:20px; font-weight:bold; margin:5px; } m.content{ color:#666; margin-bottom:15px; } .m_img{ position:relative; padding:30px; } .m_img::before{ //伪元素 content:""; position:absolute; width:160px; height:160px; background-color:#eee; border-radius:50%; z-index:-1; left:35px; top:10px; } .m_img img{ transform:scale(1); transition:all .5s; } .main li:hover .m_img img{ transform:scale(1); }
仿天猫首页类别展示的效果
<div class="main"> <div class="m_title"> 好车特卖一口价 </div> <div class="m_content"> 新车 新年 开回家 </div> <div class="m_img"> <img src="./car.jpg" alt="新车特卖"> </div> </div>
.main{ width:260px; height:270px; border:1px; solid #ccc; margin:50px auto; front-family:'Microshoft YaHei'; cursor:pointer; } .m_title{ text-align:left; font-size:20px; padding:20px 10px 10px 10px; } .m_content{ color:#11ccaa; padding:0 10px 10px 10px; } .m_img{ text-align:right; position:relative; //相对定位 } .m_img img{ position:absolute; //绝对定位 width:180px; top:0px; right:0px; teansition:right 0.3s; } .mail:hover img{ right:10px; }
