纯css动画实现跑马灯效果

最新推荐文章于 2023-04-21 16:32:19 发布

一念花开丶君临天下

最新推荐文章于 2023-04-21 16:32:19 发布

阅读量1.2w

点赞数 1

本文链接：https://blog.csdn.net/qq_43431024/article/details/85070535

版权

该动画主要以@keyframes 延迟动画实现

大致就是在动画加载到百分之多少时“动作”进行到什么程度

比如人去伸手扶墙这个“动作”

当你百分之0时不做动作，百分之百时手扶到墙，动作完成

中间那些包括你伸手，手臂打弯等等，在“时间”进行到多少，动作相应的完成到多少


	@keyframes myfirst
	{
		0%   {left:0px;}
		10%  {left:-200px;}
		20%  {left:-200px;}
		30%  {left:-400px;}
		40%  {left:-400px;}
		50%  {left:-600px;}
		60%  {left:-600px;}
		70%  {left:-800px;}
		80%  {left:-800px;}
		90%  {left:0px;}
		100% {left:0px;}
	}

定义完成之后在需要用到动画的元素css中调用–animation

infinite 代表无限循环不用的去掉即可

我这里的 15s代表动作在15秒内完成，即15秒内“动作”执行到100%；

#dong{
	animation:myfirst infinite  15s;
	-moz-animation:myfirst infinite  15s; /* Firefox   火狐*/
	-webkit-animation:myfirst infinite  15s; /* Safari and Chrome  谷歌 */
	-o-animation:myfirst infinite  15s; /* Opera */
	}

下面上完整代码需要的记得修改图片路径
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	#dong{
	animation:myfirst infinite  15s;
	-moz-animation:myfirst infinite  15s; /* Firefox */
	-webkit-animation:myfirst infinite  15s; /* Safari and Chrome */
	-o-animation:myfirst infinite  15s; /* Opera */
	}
 
	@keyframes myfirst
	{
		0%   {left:0px;}
		10%  {left:-200px;}
		20%  {left:-200px;}
		30%  {left:-400px;}
		40%  {left:-400px;}
		50%  {left:-600px;}
		60%  {left:-600px;}
		70%  {left:-800px;}
		80%  {left:-800px;}
		90%  {left:0px;}
		100% {left:0px;}
	}
</style>
</head>
	
	<body>
		<div style="width: 200px;height: 200px; position: relative; overflow: hidden;">
		<div id="dong" style="height: 200px;width: 1000px; position: absolute; left:0px;">
			<img src="css/1.jpg"/ style="width:200px;height: 200px; position:absolute; left:0px;"> 
			<img src="css/11.jpg" style="width:200px;height: 200px; position:absolute; left:200px;"/>
			<img src="css/111.jpg" style="width:200px;height: 200px; position:absolute; left:400px; "/>
			<img src="css/1.jpg" style="width:200px;height: 200px; position:absolute; left:600px;"/>
			<img src="css/11.jpg" style="width:200px;height: 200px; position:absolute; left:800px;"/>
		</div>
	</div>
	</body>
</html>

一念花开丶君临天下

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
纯css动画实现跑马灯效果

该动画主要以@keyframes 延迟动画实现大致就是在动画加载到百分之多少时“动作”进行到什么程度比如人去伸手扶墙这个“动作”当你百分之0时不做动作，百分之百时手扶到墙，动作完成中间那些包括你伸手，手臂打弯等等，在“时间”进行到多少，动作相应的完成到多少 @keyframes myfirst { 0% {left:0px;} 10% {left:-200px;}...
复制链接

扫一扫