css3图片无缝滚动

最新推荐文章于 2024-04-03 14:42:14 发布

是枝枝呀

最新推荐文章于 2024-04-03 14:42:14 发布

阅读量1.5k

点赞数 1

文章标签： css3 html css

本文链接：https://blog.csdn.net/qq_65167898/article/details/124828044

版权

文章目录

前言
一、什么是无缝滚动？
二、如何创建一个无缝滚动

前言

今天来大家了解一下无缝滚动的简单制作

一、无缝滚动是什么？

在我看来，无缝滚动是将多张图片进行无间隙的连播

二、使用步骤

1.创建一个左右无缝滚动

代码如下（示例）：

<style type="text/css">
* {
	margin:0;
	padding:0;
}
.wrap {width:500px;
height:100px;
	border:4px solid #000;
	margin:50px auto;
	overflow:hidden;
	position:relative;
	
	}
.list {
		list-style:none;
		width:1000px;
		height:100px;
		position:absolute;
		
		top:0px;/*right:0px;向右*/left:0px;/*向左*/
		animation:mymove 10s 1s infinite linear;

}
.list li {
		width:98px;
	border:1px solid white;
	background:blue;
	vertical-align:middle;
	text-align:center;
	height:98px;
	line-height:98px;
	color:white;
	float:left;

}

@keyframes mymove{
/*	from{right:0px;}
	to{right:-500px;}*//*向右*/
	from{left:0px;}
	to{left:-500px;}/*向左*/
}
.list:hover{ animation-play-state:paused;
cursor:pointer;}	

</style>
</head>

<body>
<div class="wrap">
  <ul class="list">
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
    <li> 4 </li>
    <li> 5 </li>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
    <li> 4 </li>
    <li> 5 </li>
   </ul>
</div>

</body>

2.创建一个上下移动无缝滚动

代码如下（示例）：

<style type="text/css">
* {
	margin:0;
	padding:0;
}
.wrap {width:100px;
height:500px;
	border:4px solid #000;
	margin:50px auto;
	overflow:hidden;
	position:relative;
	}
.list {
		list-style:none;
		width:100px;
		/*height:1000px;*/
		position:absolute;
		/*top:0px;向上*/
		bottom:0px;/*向下*/
		animation:mymove 10s 1s	infinite linear;

}
.list li {
		width:98px;
	border:1px solid white;
	background:blue;
	vertical-align:middle;
	text-align:center;
	height:98px;
	line-height:98px;
	color:white;
	float:left;

}

@keyframes mymove{
	/*from{top:0px;}
	to{top:-500px;}  向上*/
	from{bottom:0px;}
	to{bottom:-500px;}/*向下*/
}
	.list:hover{ animation-play-state:paused;
cursor:pointer;}	

</style>
</head>

<body>
<div class="wrap">
  <ul class="list">
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
    <li> 4 </li>
    <li> 5 </li>

    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
    <li> 4 </li>
    <li> 5 </li>
   </ul>
</div>

</body>

是枝枝呀

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css3图片无缝滚动

文章目录前言一、什么是无缝滚动？二、如何创建一个无缝滚动前言今天来大家了解一下无缝滚动的简单制作一、无缝滚动是什么？在我看来，无缝滚动是将多张图片进行无间隙的连播二、使用步骤1.创建一个左右无缝滚动代码如下（示例）：<style type="text/css">* { margin:0; padding:0;}.wrap {width:500px;height:100px; border:4px solid #000;...
复制链接

扫一扫