css3现在已经可以替代很多flash和脚本语言，实现网页上很多动态效果。但是由于个人需求的不同，模板具有很大的局限性，所以最好的方式就是学着自己做啦。下面我把两款比较常规和漂亮的css3 hover效果记录一下
1.圆形旋转遮盖效果
image
效果：鼠标移入图片发生顺时针45度旋转，并覆盖上一层半透明遮罩，special food从左侧移入，enjoy the lunch time 从右侧移入
代码如下：
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值变化达到动画效果，不能用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属性达到效果，此处要注意两点：
1.显示隐藏用opacity
2.把过度属性transition和写在初始状态，不然hover时有特效，hover后特效会消失得很生硬
2.方形上移标签显示
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值就可以实现变化，在此只呈现效果不做特别说明
