方法一，改变的方式上图宽度:.g-outer{width:650px;height:340px;background-image:url(image1.png);overflow:hidden;}.g-inner{height:340px;background:url(image2.png);animation:widthchange3sinfinitealternatelinear;}@keyframeswidthchange{0%{width:650px;}100%{width:0px;}}效果如下：当然用mask遮罩也很容易实现类似效果：.g-outer{background-image:url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614180122.png);}.g-inner{background:url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614175811.png);mask:linear-gradient(90deg,#fff0%,#fff50%,transparent50%,transparent100%);mask-size:200%100%;animation:maskChange2sinfinitealternatelinear;}@keyframesmaskChange{0%{mask-position:-100%0;}100%{mask-position:00;}}也可以达到同样的效果：上面DEMO的完整代码：CodePenDemo--SwitchPicture[1]还不是很强大的mask属性太了解的可以戳：精彩的CSSMASK[2]使用resize实现拖拽功能。下一步是核心也是最关键的第一步是巧妙地使用CSS的resize属性，实现对元素宽度的拖拽控制。什么是resizeresize：这个属性可以让你控制一个元素的大小语法如下：{/*Keywordvalues*/resize:none;resize:both;resize:horizo??ntal;resize:vertical;resize:block;resize:inline;}看最简单的DEMO:

Loremipsumdolorsitamet,consecteturadipipisicingelit.Aautquilaborererumpplaceatsimiliquehicconsequaturtemporedoloribusaquidalias,nobisvoluptates.Perferendis,voluptateplaceatessesolutadexheit

200px;resize:horizo??ntal;herepoverflow:widthofweset0}水平拖动以更改宽度。效果如下：简单总结一些提示：resize需要配合overflow:scroll才能生效。当然，准确的说法是overflow是不可见的，或者直接作用于images、