CSS实现全景图移动效果!

CSS/设计
772
0
0
2022-05-11
标签   Css实践

鼠标放在图片上时,图片自动移动,到尽头后,反向移动

首先我们给的图片尺寸:3320*1352

先将图片放在一个300*200的div盒子中

HTML结构:

CSS实现全景图移动效果!

先将图片作为背景图:

CSS实现全景图移动效果!

定义一个动画,设置动画效果:

CSS实现全景图移动效果!

使用动画效果,设置动画状态为暂停:

CSS实现全景图移动效果!

鼠标移入后,动画开始:

CSS实现全景图移动效果!

效果图:

CSS实现全景图移动效果!