纯CSS图片滚动轮播

所属分类:UI,媒体-悬停,图片展示

 18006  164  查看评论 (2)
分享到微信朋友圈
X
纯CSS图片滚动轮播 ie兼容10

更新时间:2020-04-16 23:30:15

图片数量修改方法,根据所需要展示图的数量,当前6张图每张宽度300,nav ul宽度为6*300=1800px,每张图滚动时间为2秒,2*6,animation: moving 12s

nav ul {
    width: 1800px;
    animation: moving 12s linear infinite alternate;
}

循环x位移,6*300=1800px-300在转为负数。

@keyframes moving {
    form {
        transform: translateX(0);
    }
    to {
        transform: translateX(-1500px);
    }
}
相关插件-悬停,图片展示

横向跟随图片文字特效

横向跟随图片动画代码(jQuery)
  悬停
 32054  434

数十次css3鼠标悬停特效

鼠标移上去,界面显示的多种方式,各种css3动画
  悬停
 34987  840

jQuery+Css3鼠标不同方向移入效果

jQuery鼠标方向感知,不同方向移入移除效果
  悬停
 25245  365

图片添加遮罩

根据鼠标进入的位置插入遮罩
  悬停
 34685  425

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    kangleyunju 0
    2022/8/15 11:08:00
    好图好图好图好图好图好图好图好图好图好图好图 回复
    ∝ㄤ???酝┵3? 0
    2021/3/4 15:34:31
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复