1. 首页
  2. 课程学习
  3. 网页制作
  4. 纯CSS实现图片切换鼠标切换相结合.rar

纯CSS实现图片切换鼠标切换相结合.rar

上传者: 2020-08-22 15:59:28上传 RAR文件 26.06MB 热度 23次
图片自动切换实现原理:使用一个div并设置溢出隐藏来只显示一次一张图片,同时设置另一个div(总图片div),尺寸为所有图片横排的总尺寸宽高,作为动画顺序播放,然后使用css3动画,通过对div(总图片div)进行位移,从而达到显示不同的图片,每次偏移一个图片的宽度,即可显示下一张图片。5张图片,需要切换4次。 鼠标实现图片切换原理:通过设置每个超链接的宽度高度,并使用position定位到指定位置,编写每一个超链接的动画来分别切换相应图片的位置,使用hover,当鼠标放在指定超链接上时,实现指定的动画切换到目标图片上。
下载地址
用户评论