background-size的默认值是cover,必须要保证是统一类型的值才能实现过渡效果
无效写法
li {
padding: 26px 28px 0;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background: url(../images/qiyezhan/pic1.png) no-repeat center;
&:hover {
background-size: 120%;
-webkit-transition: background-size .3s linear;
transition: background-size .3s linear;
}
}
正确写法
li {
padding: 26px 28px 0;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background: url(../images/qiyezhan/pic1.png) no-repeat center;
background-size: 100%;
&:hover {
background-size: 120%;
-webkit-transition: background-size .3s linear;
transition: background-size .3s linear;
}
}
成功实现过渡放大背景效果