css3动画实现无缝连接

Love The Way You Lie 2022-02-22 04:29 411阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    		*body{
    			margin: 0;
    			padding: 0;
    		}
    			.warp{
    				width: 1500px;
    				height: 135px;
    				border: 3px solid red;
    				margin: 300px auto;
    				position: relative;
    				overflow: hidden;
    			}
    			
    			.warp ul{
    				width:3000px;
    				height: 135px;
    				position: absolute;
    				animation: moves 10s linear infinite;
    				padding: 0;
    				margin: 0;
    				
    			}			
    			.warp li{
    				float: left;
    				list-style: none;
    				margin-left: 5px;
    				width: 200px;					
    			}
    
    			@keyframes moves{
    				0%{
    					transform: translateX(0px);
    				}
    				100%{
    					transform: translateX(-1500px);
    				}
    			}		
    			.warp:hover ul{
    				animation-play-state: paused;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="warp">
    			<ul>
    				<li><img src="img/Lol-01.jpg"></li>
    				<li><img src="img/Lol_02.jpg"></li>
    				<li><img src="img/Lol_03.jpg"></li>
    				<li><img src="img/Lol_04.jpg"></li>
    				<li><img src="img/Lol_05.jpg"></li>
    				<li><img src="img/Lol_06.jpg"></li>
    				<li><img src="img/Lol-07.jpg"></li>
    				
    				<li><img src="img/Lol-01.jpg"></li>
    				<li><img src="img/Lol_02.jpg"></li>
    				<li><img src="img/Lol_03.jpg"></li>
    				<li><img src="img/Lol_04.jpg"></li>
    				<li><img src="img/Lol_05.jpg"></li>
    				<li><img src="img/Lol_06.jpg"></li>
    				<li><img src="img/Lol-07.jpg"></li>
    			</ul>
    		</div>
    	</body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关【CSS3】CSS3 动画 ⑥ ( 动画属性示例 | 精灵图帧动画效果实现 )

文章目录一、需求说明二、代码分析 1、动画属性 2、布局分析 3、动画实现三、完整代码示例

ゞ浴缸里的玫瑰/ 2023年10月14日 17:36/ 0 赞/ 13 阅读

相关【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )

文章目录一、CSS3 动画简介二、CSS3 动画实现步骤三、动画定义四、代码示例一、CSS3 动画简介

我不是女神ヾ/ 2023年10月14日 15:47/ 0 赞/ 151 阅读

相关 css3动画实现帧动画

pic { height:90px; width:65; background-position: -40px -44px;

- 日理万妓/ 2023年01月17日 09:21/ 0 赞/ 155 阅读

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

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

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

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

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

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

相关 CSS3实现动画相册

See the Pen [ ainmated image hover effects][ainmated image hover effects] by haiqing wan

桃扇骨/ 2022年02月26日 04:46/ 0 赞/ 279 阅读

相关 css3动画实现无缝连接

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

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

相关 CSS3方式实现动画菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

淡淡的烟草味﹌/ 2022年01月27日 12:07/ 0 赞/ 232 阅读

相关 CSS3动画

CSS3动画 > 网页的动态效果实现动画效果的四种方式 1. 动态图片 2. Flash 3. CSS动画相关属性 4. JavaScript 实现

Dear 丶/ 2021年11月16日 07:38/ 0 赞/ 816 阅读

相关 CSS3实现骗人版无缝轮播图

无缝轮播贴上HTML+CSS代码, 复制就能用, 不懂查W3SCHOOL就完事, 现学现用 <!DOCTYPE html> <html lang=

亦凉/ 2021年05月12日 11:55/ 0 赞/ 520 阅读