background-size搭配transition实现鼠标hover背景图放大问题-白红宇

background-size搭配transition实现鼠标hover背景图放大问题

阅读量：6268 次

发布时间：2019-06-22

本文共 841 字，大约阅读时间需要 2 分钟。

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;        }}

　　成功实现过渡放大背景效果

转载于:https://www.cnblogs.com/wszxx/p/10684803.html

你可能感兴趣的文章

Oracle体系结构之oracle密码文件管理

查看>>

【leetcode】Remove Element （easy）