CSS3鼠标hover背景图片缩放动画效果 |
您所在的位置:网站首页 › 背景图片缩放 › CSS3鼠标hover背景图片缩放动画效果 |
这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。 使用方法 HTML结构以一个为例,在它上面设置一张背景图片,HTML结构如下: 上面的默认是从中心开始缩放图片。你也可以设置为以其它原点作为背景图片缩放的中心点,例如以背景图片的右上角为缩放中心点: 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; } 本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/css3/css3donghua/201709134737.html 上一篇:圆形图片CSS3鼠标hover动画效果 下一篇:18种炫酷CSS3动画效果库Mimic.css 相关插件 CSS像素开关按钮动画效果 12种黑白色loading动画特效 炫酷纯CSS蓝色流光文字动画效果 CSS制作逼真的雷达扫描效果 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |