前言
❕在移动端上,部分手机无法正常使用background-position,background-size的属性。
先说我要实现的效果,就是将一张图放大,然后实现画面放大以达到前进的效果。
第一步效果

第二步效果,只显示绿框

第三步效果,只显示绿框

线上效果地址https://weixin.mountainkj.com.cn/valentine/,请在微信中代开。
部分样式代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| .container { min-height: 100vh; transition: all 2s linear; bacgkround: url("https://cdn.xiaolouyou.com/allove/Valentine2/bg.jpg"); background-position: center top; background-size: 100% auto; }
.container.step2 { background-position: center -250px; background-size: 141% auto; }
.container.step3 { background-position: -658px -1195px; background-size: 400% auto; }
|
由于图片过大会显示出问题。