html5 hover,css3 Hover

最新推荐文章于 2023-10-13 17:03:44 发布

高分子科学前沿

最新推荐文章于 2023-10-13 17:03:44 发布

阅读量233

点赞数

文章标签： html5 hover

这篇博客分享了如何使用CSS3实现两种动态效果：1) 鼠标悬停时圆形图片顺时针45度旋转并覆盖半透明遮罩；2) 方形图片上移显示文字标签。通过transform和transition属性，实现了平滑的过渡动画，强调了opacity和transform属性在CSS3动画中的应用。

摘要由CSDN通过智能技术生成

css3现在已经可以替代很多flash和脚本语言，实现网页上很多动态效果。但是由于个人需求的不同，模板具有很大的局限性，所以最好的方式就是学着自己做啦。下面我把两款比较常规和漂亮的css3 hover效果记录一下

1.圆形旋转遮盖效果

b53c08e70fd4

image

效果：鼠标移入图片发生顺时针45度旋转，并覆盖上一层半透明遮罩，special food从左侧移入，enjoy the lunch time 从右侧移入

代码如下：

html部分

SPECIAL FOOD

enjoy the lunch time

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.方形上移标签显示

b53c08e70fd4

image

html部分

Meat from the rib section tends to be tender and well marbled with the fat that makes steaks and roasts juicy and fl.

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