首页 > 其他分享 >CSS3_图片连续无缝滚动

CSS3_图片连续无缝滚动

时间:2023-04-30 21:03:44浏览次数:51  
标签:CSS3 滚动 top 200px animation background 0px 无缝 left


效果图:

传不上来。。。

 

在线预览地址:地址

代码

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片滚动</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<style>
		*{padding: 0;margin: 0;}
		.out{
			width: 900px;
			height: 300px;
			margin: 20px auto;
			overflow: hidden;
			text-align: center;
		}
		.con{
			width: 3300px;
			height: 300px;
			overflow: hidden;
			animation: move 8s linear infinite normal;
			animation-fill-mode:forwards;
		}
		.con:hover{
			animation-play-state:paused;
			-webkit-animation-play-state:paused;
		}
		@keyframes move{
			0%{transform:translateX(0px);}
			100%{transform:translateX(-2400px);}
		}

		.con li{
			float: left;
			list-style: none;
			overflow: hidden;
		}
		.con img{
			float: left;
			width: 300px;
			height: 300px;
		}
		.pause{
			position: relative;
			height: 60px;
			display: inline-block;
			margin: 20px auto;
			text-align: center;
		}
		.pause:before{
			position: absolute;
			content: "Pause";
			display: inline-block;
			width: 100px;
			height: 60px;
			left: 0px;
			line-height: 60px;
			font-size: 20px;
			color: #fff;
			margin: 0 20px;
			background: #6293d3;
			border: none;
			border-radius: 20px;
			outline: none;
		}
		.out input{
			display: none;
		}
		.out input:checked ~ .con{
			animation-play-state:paused;
			-webkit-animation-play-state:paused;
		}
		.out input:checked ~ .pause:before{
			content: "Start";
		}
	</style>
</head>
<body>
	<div class="out">
		<input id="ipt1" type="checkbox" name="" value="">
		<label for="ipt1" class="pause">
		</label>
		<ul class="con">
			<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889462125&di=7c906a8c0dcc2a845c7d28a201318752&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8c1001e93901213fe4c06e3958e736d12e2e9567.jpg" alt=""></li>
			<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889488116&di=21ae4bf7271789353831cdaacdb06a07&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F9358d109b3de9c821370156d6081800a19d8433f.jpg" alt=""></li>
			<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515298&di=a58343b0c4bcc997236124fbf15c31be&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F738b4710b912c8fc505ae929f0039245d78821ac.jpg" alt=""></li>
			<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515297&di=39e7b6a09eb64717364e69ac579de339&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F09fa513d269759eeef490028befb43166d22df3c.jpg" alt=""></li>
			<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515296&di=0eaccd9930036823ec3df5cb9c7094d0&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb219ebc4b74543a96a58c53112178a82b801148f.jpg" alt=""></li>
			<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515296&di=8e001573a25c2ab547dd864b627ef9ce&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fc8ea15ce36d3d539433a63213687e950342ab0c9.jpg" alt=""></li>
			<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515295&di=594c0cff7730153188615749b6f552aa&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F960a304e251f95cacc952852c5177f3e660952f5.jpg" alt=""></li>
			<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515295&di=0ac3110ebb1af9e59d187ee6b674fb71&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F342ac65c103853434cc02dda9f13b07eca80883a.jpg" alt=""></li>
			
			<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889462125&di=7c906a8c0dcc2a845c7d28a201318752&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8c1001e93901213fe4c06e3958e736d12e2e9567.jpg" alt=""></li>
			<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889488116&di=21ae4bf7271789353831cdaacdb06a07&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F9358d109b3de9c821370156d6081800a19d8433f.jpg" alt=""></li>
			<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515298&di=a58343b0c4bcc997236124fbf15c31be&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F738b4710b912c8fc505ae929f0039245d78821ac.jpg" alt=""></li>
		</ul>
	</div>
</body>
</html>

参考的菜鸟教程的:

http://www.runoob.com/try/try.php?filename=trycss3_animation3

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>
</html>

 

标签:CSS3,滚动,top,200px,animation,background,0px,无缝,left
From: https://blog.51cto.com/u_15976398/6238247

相关文章

  • 【整理】CSS3知识点4-分页
    分页样式http://www.runoob.com/css3/css3-pagination.html1、=======================================================CSS分页实例简单分页如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。以下实例演示了如何使用HTML和CSS来......
  • css3效果真Nb,可惜的ie
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content=&quo......
  • jquery:临时禁止鼠标滚动 How to disable scrolling temporarily?
    1.代码://left:37,up:38,right:39,down:40,//spacebar:32,pageup:33,pagedown:34,end:35,home:36varkeys={37:1,38:1,39:1,40:1};functionpreventDefault(e){e=e||window.event;if(e.preventDefault)e.preventDefault()......
  • jquery.liMarqee.js无缝滚动的使用问题
    引入jq、liMarquee.js和liMarquee.css文件<scriptsrc="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><scriptsrc="./js/jquery.liMarquee.js"></script><linkrel="stylesheet&quo......
  • CSS3弹性盒子用于子元素填充父元素
    主要记住三个关键点父元素display设置为flex,表明该容器是弹性盒子,设置flex-flow指明弹性方向,子元素设置flex属性,指定弹性比例 CSS3弹性盒子|菜鸟教程(runoob.com)......
  • sql.SQLException: 对只转发结果集的无效操作: absolute,可滚动结果集
    获得ResultSet的长度可以使用getRow,但是首先要设置ResultSet为可滚动结果集,否则会报java.sql.SQLException:对只转发结果集的无效操作:absolute设置方法为Statement 的设置方法:Statement stmt=con.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_O......
  • 多元时间序列滚动预测:ARIMA、回归、ARIMAX模型分析|附代码数据
    原文链接:http://tecdat.cn/?p=22849最近我们被客户要求撰写关于多元时间序列滚动预测的研究报告,包括一些图形和统计输出。当需要为数据选择最合适的预测模型或方法时,预测者通常将可用的样本分成两部分:内样本(又称"训练集")和保留样本(或外样本,或"测试集")。然后,在样本中估计模型,并......
  • 只监听父元素的滚动事件,而不监听子元素的滚动事件
    第一种,JS1、判断domthis.$refs.squareRef.addEventListener('wheel',this.addScrolbarFn,false)addScrolbarFn(event){event.stopPropagation()constdom=this.$refs?.rightResultRef?.$refs?.resultDivif(event.target===this.$refs?.squareRef){......
  • uni-app中使用uCharts图表设置横向滚动无法滑动。
    opts:{ color:["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], padding:[15,10,0,0], enableScroll:true, upd......
  • 鼠标穿透控制下层窗口的滚动条
    /*应:我怕生!:linux下在非激活的窗口上也能用滚轮.并且窗口不会被提升..我觉得这设置好好哦.可惜Windows下不知道怎么弄.*/;例子:鼠标滚轮穿透控制其下窗体垂直滚动条的位置。;因为焦点控件随时更新,所以需要用到v1.0.43.06+本版中的ControlGetHwnd命令。;ControlGetHwnd命......