#CSS# 【三】 实现鼠标移入时图片悬浮放大
#vueCSS实现鼠标移入时图片的放大效果以及缓慢过渡需求:鼠标移入图片时,图片从中心向外面放大使用到三行
·
CSS实现鼠标移入时图片悬浮放大
在页面的前端开发过程中,悬浮放大效果是非常常见的,
所以为了更快理解悬浮放大效果的制作,我们首先要来看下这几个名词的概念
第一个:
overflow: hidden
就是给一个元素中设置overflow:hidden,
那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位
第二个:
transform:scale()
可以实现按比例放大或者缩小功能
第三个:
transition
可以设置动画执行的时间,实现缓慢或者快速的执行动画
经常写成:
transition: all xx秒
而它们的使用有两种情况
——等比例悬浮缩放以及x轴,y轴对应缩放
第一种情况,等比例缩放
(就是x,y是使用transform: scale(1.1)这种类型的)
.big-box div { //这个是包着图片的大盒子
width: 311px;
height: 175px;
border-radius: 5px 5px 0 0;
background-color: #333333;
overflow: hidden;//隐藏超出的部分
}
.big-box div:hover {
cursor:pointer; //经过页面时,鼠标会变成一只手
}
.big-box img {
width: 100%;
height: 100%;
background-color: #F9B008;
transform: scale(1.1); //原本的图片的大小,图片原来的大小不变
transition: all 0.6s;
}
.big-box img:hover{
transform: scale(1.2);//图片按照比例,整体放大了1.2倍
// 当鼠标经过是图片放大的倍数为1.2倍
}
第二种情况,宽度高度各自缩放
(就是x,y是使用transform: scale(1,1)这种类型的)
当transform: scale(1,1),里面是使用逗号的时候,说明就是x,y轴各自进行缩放
再看hover,里面的数值transform: scale(2,4)
就是第一个数值就是x轴放大的倍数,第二个数值是y轴放大的倍数,
就是x轴为2,即系x轴放大了2倍,y轴为4,就是y轴放大了4倍
.big-box div {
width: 311px;
height: 175px;
border-radius: 5px 5px 0 0;
background-color: #333333;
overflow: hidden; //隐藏超出的部分
}
.big-box div:hover {
cursor:pointer;
}
.big-box img {
width: 100%;
height: 100%;
background-color: #F9B008;
transform: scale(1,1); //x轴,y轴
transition: all 0.6s; //设置动画执行的时间为0.6s
}
.big-box img:hover{
transform: scale(2,4);//x轴放大了2倍,y轴放大了4倍
}
综上所述,我们在设置图片的悬浮效果时,
一般会有以上的两种情况呈现,
为了避免出现变形的情况,我们通常都是使用第一种做法,等比例缩放,
然后切记不要忘记在父盒子里面加上 overflow: hidden!
更多推荐
已为社区贡献2条内容
所有评论(0)