摘要:这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
简要教程
这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。
使用方法
HTML结构
以一个<div>为例,在它上面设置一张背景图片,HTML结构如下:
<div class="hover-zoom" style="background-image: url(img/4.jpg)"></div>
上面的默认是从中心开始缩放图片。你也可以设置为以其它原点作为背景图片缩放的中心点,例如以背景图片的右上角为缩放中心点:
<div class="hover-zoom" style="background-position: top right;background-image: url(img/4.jpg)"></div>
CSS样式
背景图片的缩放通过CSS3 background-size属性来实现。核心CSS代码如下:
.hover-zoom { float: left; margin: 0; height: 180px; width: 300px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-size: 110%; background-position: center; background-repeat: no-repeat; background-color: gray; position: relative; } .hover-zoom:hover { background-size: 100%; } .hover-zoom p { position: absolute; bottom: 0; left: 0; width: 100%; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.4); padding: 0.5em; margin: 0; box-sizing: border-box; }
本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号