更有效的方式来放大背景图片

Question

我目前的代码来放大背景图片如下。

.portfolioItem { 
    width: 25vw; 
    height: 25vw; 

    background-size: 100% 100%; 
    background-position: center; 
    overflow: hidden; 

    position: relative; 

    transition: all .4s ease-out; 
} 

.portfolioItem:hover { 
    background-size: 110% 110%; 
} 

我试图尽可能简化它，但它仍然滞后很多。

是否有另一种执行此操作的方法，具有较少的滞后/较高的性能？我对JS解决方案持开放态度，但CSS绝对是我心目中最好的工具。

Answer 1

可以使用css transform或css3 transform或animation就这样

.portfolioItem:hover{ 
-webkit-animation:ex 2s; 
} 

@-webkit-keyframes ex{ 
    0%{transform:scale(1,1);} 
    100%{transform:scale(2,2);} 
}