css3現(xiàn)在已經(jīng)可以替代很多flash和腳本語言，實(shí)現(xiàn)網(wǎng)頁(yè)上很多動(dòng)態(tài)效果。但是由于個(gè)人需求的不同，模板具有很大的局限性，所以最好的方式就是學(xué)著自己做啦。下面我把兩款比較常規(guī)和漂亮的css3 hover效果記錄一下
1.圓形旋轉(zhuǎn)遮蓋效果
image
效果：鼠標(biāo)移入圖片發(fā)生順時(shí)針45度旋轉(zhuǎn)，并覆蓋上一層半透明遮罩，special food從左側(cè)移入，enjoy the lunch time 從右側(cè)移入
代碼如下：
html部分
<div class="img">
<img src="">
<div class="layer">
<p class="title">SPECIAL FOOD</p>
<p class="content">enjoy the lunch time</p>
</div>
</div>
css部分
.img{width:206px;position:relative}
.img img{height:200px;width:200px;border-radius:50%;border:1px solid #ccc;padding:3px;transition:all .35s ease-in-out}
.img:hover img{transform:rotate(45deg)}
.layer{position:absolute;top:1px;left:1px;height:206px;width:206px;border-radius:50%;background:rgba(0,0,0,.3);**opacity:0**;transition:all .35s ease-in-out}
.img:hover .layer{**opacity:1**} //親測(cè)要用opacity值變化達(dá)到動(dòng)畫效果，不能用display哦
.title{margin-top:30px;text-align:center;color:#fff;font-size:24px;font-weight:700;box-sizing:border-box;padding:0 33px;**transform:translateX(-100%)**;transition:all .35s ease-in-out}
.img:hover .title{transform:**translateX(0)**} //此處是文字的x軸移動(dòng)效果
.content{padding-top:10px;border-top:1px solid #fff;text-align:center;color:#ddd;font-size:16px;transform:**translateX(100%)**;transition:all .35s ease-in-out}
.img:hover .content{**transform:translateX(0)**} //此處是文字的x軸移動(dòng)效果
雖然代碼看著挺多，但主要就是利用transform屬性達(dá)到效果，此處要注意兩點(diǎn)：
1.顯示隱藏用opacity
2.把過度屬性transition和寫在初始狀態(tài)，不然hover時(shí)有特效，hover后特效會(huì)消失得很生硬
2.方形上移標(biāo)簽顯示
image
html部分
<div class="img">
<img src="">
<div class="layer">
Meat from the rib section tends to be tender and well marbled with the fat that makes steaks and roasts juicy and fl.
</div>
</div>
css部分
.img{position:relative;border:8px solid #fff;width:295px;box-shadow:2px 2px 3px rgba(0,0,0,.3);**overflow:hidden**;outline:1px solid #eee}
.img img{transition:all .35s ease-in-out;**transform:translateY(0)**}
.img:hover img{**transform:translateY(-79px)**}
.layer{position:absolute;height:80px;width:293px;background:rgba(4,58,117,.8);color:#fff;padding:11px;box-sizing:border-box;text-align:center;font-family:'Times New Roman',Times,serif;transition:all .35s ease-in-out;**transform:translateY(-104%)**;opacity:0}
.img:hover .layer{opacity:1}
這個(gè)效果比較簡(jiǎn)單，只需要改變Y值就可以實(shí)現(xiàn)變化，在此只呈現(xiàn)效果不做特別說明
