css3現(xiàn)在已經(jīng)可以替代很多flash和腳本語言，實現(xiàn)網(wǎng)頁上很多動態(tài)效果慌闭。但是由于個人需求的不同别威，模板具有很大的局限性，所以最好的方式就是學(xué)著自己做啦驴剔。下面我把兩款比較常規(guī)和漂亮的css3 hover效果記錄一下
1.圓形旋轉(zhuǎn)遮蓋效果
image
效果：鼠標(biāo)移入圖片發(fā)生順時針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**} //親測要用opacity值變化達(dá)到動畫效果豺妓，不能用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軸移動效果
.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軸移動效果
雖然代碼看著挺多，但主要就是利用transform屬性達(dá)到效果布讹，此處要注意兩點：
1.顯示隱藏用opacity
2.把過度屬性transition和寫在初始狀態(tài)琳拭，不然hover時有特效，hover后特效會消失得很生硬
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}
這個效果比較簡單描验，只需要改變Y值就可以實現(xiàn)變化白嘁，在此只呈現(xiàn)效果不做特別說明
