css3 Hover

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值就可以实现变化，在此只呈现效果不做特别说明