纯CSS图片滚动轮播

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

 17883  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图片悬停插件HoverEx

图片悬停精美动画效果HoverEx插件
  悬停
 36711  555

jQuery图片边框线条动画效果

本案例的主要效果是鼠标悬停在图片上,从其中的两个角分别延伸出两条线 类似两条河流交汇的效果
  悬停
 39136  435

css3的button组件

css3的button组件,可以直接调用,使用方便,各种效果
  悬停
 35490  526

css3.0按钮触控悬停效果集

css3.0按钮触控悬停效果集
  悬停
 38861  465

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

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