纯CSS图片滚动轮播

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

 10830  126  查看评论 (1)
分享到微信朋友圈
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);
    }
}
相关插件-悬停,图片展示

CSS3实现超酷的鼠标悬停效果

CSS3实现超酷的鼠标悬停效果
  悬停
 35733  538

响应式网站图标

悬停变换效果
  悬停
 29652  328

jQuery仿梦幻西游指针特效

梦幻西游指针图标和水波特效
  悬停
 21801  290

鼠标移入展开(原创)

适用于鼠标移入产品详情展示
  悬停
 19691  315

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

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