css3实现无缝滚动效果

爱被打了一巴掌 2023-06-15 07:24 12阅读 0赞

1 <!doctype html> 
    2 <html> 
    3 <head> 
    4 <meta charset="utf-8"> 
    5 <title>无标题文档</title> 
    6 <style> 
    7 @keyframes move 
    8 { 
    9 0% 
    10 { 
    11 transform:translateX(0px); 
    12 } 
    13 100% 
    14 { 
    15 
    transform:translateX(-500px); 
    16 } 
    17 } 
    18 ul{margin:0;padding:0; list-style:none;} 
    19 .picTab{width:500px;height:100px;border:2px solid #000; margin:50px auto; 
    20 
    21 overflow:hidden;} 
    22 .picTab ul{width:1000px;height:100px; animation:move 5s linear infinite;} 
    23 .picTab li 
    24 
    25 {margin:1px;float:left;width:98px;height:98px;background:#000;color:#fff; 
    26 
    27 font:50px/98px "宋体"; text-align:center;} 
    28 .picTab:hover ul{ animation-play-state:paused;} 
    29 </style> 
    30 </head> 
    31 <body> 
    32 <section class="picTab"> 
    33 <ul> 
    34 <li>1</li> 
    35 <li>2</li> 
    36 <li>3</li> 
    37 <li>4</li> 
    38 <li>5</li> 
    39 <li>1</li> 
    40 <li>2</li> 
    41 <li>3</li> 
    42 <li>4</li> 
    43 <li>5</li> 
    44 </ul> 
    45 </section> 
    46 </body> 
    47 </html>

效果图：

![aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvNzk1MTYzLzIwMTYwNS83OTUxNjMtMjAxNjA1MDcwMDI3NTkzNzItMjAwMjQ4MjYxNS5naWY][]

[aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvNzk1MTYzLzIwMTYwNS83OTUxNjMtMjAxNjA1MDcwMDI3NTkzNzItMjAwMjQ4MjYxNS5naWY]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvNzk1MTYzLzIwMTYwNS83OTUxNjMtMjAxNjA1MDcwMDI3NTkzNzItMjAwMjQ4MjYxNS5naWY

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3实现无缝滚动效果

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <

爱被打了一巴掌/ 2023年06月15日 07:24/ 0 赞/ 13 阅读

相关 js使用transition效果实现无缝滚动

转自：[http://www.pinlue.com/article/2020/09/0916/5311219316405.html][http_www.pinlue.com_a

快来打我*/ 2022年12月10日 05:58/ 0 赞/ 269 阅读

相关 css3 文字横向无缝滚动

<div class="notice-container"> <div class="header-notice-marquee" id="notice-

悠悠/ 2022年10月25日 01:24/ 0 赞/ 402 阅读

相关无缝轮播滚动html模板,js轮播图无缝滚动效果

在做轮播图时如果首尾不能连起来的话，效果会有点丑，下面介绍一种我常用的方法：先文字说明一下：如果要展示5张图，分别为1,2,3,4,5 那么在代码的引入中是这样的：1

缺乏、安全感/ 2022年10月06日 10:53/ 0 赞/ 310 阅读

相关 css + js实现简单无缝滚动字幕

css + js实现无缝滚动字幕 > 利用js和css就可以很方便的实现一个无缝滚动字幕，使得列表在一个方框里不停滚动目录 css js实现无缝滚动字幕

Dear 丶/ 2022年06月17日 04:44/ 0 赞/ 331 阅读

相关纯css3实现无缝轮播图效果

主要就是利用css3中的动画了，看完整实现代码如下： <!DOCTYPE html> <html lang="en"> <head>

迷南。/ 2022年05月14日 10:06/ 0 赞/ 312 阅读

相关 js实现无缝向上滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

矫情吗；*/ 2022年05月13日 08:36/ 0 赞/ 298 阅读

相关 CSS3实现简单的无缝轮播效果

CSS实现简单的无缝轮播效果由于还没有接触到JS实现动态效果，但是比较想实现页面的简单轮播效果，翻了翻CSS标签，发现只有CSS3也可以实现动画效果，

柔情只为你懂/ 2022年03月15日 15:46/ 0 赞/ 713 阅读

相关 css3动画实现无缝连接

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

Love The Way You Lie/ 2022年02月22日 04:29/ 0 赞/ 460 阅读

相关 Jquery+css实现图片无缝滚动轮播

Today，在XX学院的教学视频中，偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程，虽然以前已写过类似的，但是我感觉他学的比较精简。为了方便以后做项目时直接拷...

系统管理员/ 2021年01月27日 15:32/ 0 赞/ 867 阅读