css3 animation 箭头向右滚动渐隐

最新推荐文章于 2024-08-01 13:41:00 发布

ange2017

最新推荐文章于 2024-08-01 13:41:00 发布

阅读量1w

点赞数 9

分类专栏： css3 文章标签： css3 animation

本文链接：https://blog.csdn.net/ange2017/article/details/81537977

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是一个右箭头的小图标。

keyframes 创建一个css3动画用 animation 调用并用延迟动画的办法做出匀速滚动的效果。

直接贴上html代码，复制即可运行。

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="webhivers" />
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_695050_qf5jdjknto.css">
<title>arrow-right</title> 
<style>
	.container { width: 1000px;margin: 0 auto; }
	@keyframes move { 
	  0% {left: 0%;	 opacity: 0; }
	  70% { left: 70%; opacity: 1 }
	  100% {left: 100%;opacity: 0;}
	}		 
	.move{-webkit-animation-name:move;animation-name:move;position:relative;margin-left:-16px;}
	.ar-animated{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;font-style:inherit;-webkit-animation-timing-function:linear;animation-timing-function:linear;}
	.ar-delay-1s{animation-delay:0.1s;}
	.ar-delay-2s{animation-delay:0.2s;}
	.ar-delay-3s{animation-delay:0.3s;}
	.ar-delay-4s{animation-delay:0.4s;}
	.ar-delay-5s{animation-delay:0.5s;}
	.ar-delay-6s{animation-delay:0.6s;}
	.ar-delay-7s{animation-delay:0.7s;}
	.ar-delay-8s{animation-delay:0.8s;}
	.ar-delay-9s{animation-delay:0.9s;}
	.ar-delay-10s{animation-delay:0.10s;}
	 
</style>


</head>

<body>

<!-- Wrapper -->
<div> 

	<!-- Header -->
	<header id="header"></header>
	<!-- #Header end -->


	<!-- Content -->
	<section id="content">

		<div class="content-wrap">

			<div class="container">

				<!-- HTML CODE HERE -->

				<div>
					<!-- <span class="move animated">>>>>>></span> -->
					<span style="width:35px;display: block">
						<!-- <i class="move animated delay-7s iconfont icon-arrow-right"></i>
						<i class="move animated delay-6s iconfont icon-arrow-right"></i>
						<i class="move animated delay-5s iconfont icon-arrow-right"></i> -->
						<i class="move ar-animated ar-delay-4s iconfont icon-arrow-right"></i>
						<i class="move ar-animated ar-delay-3s iconfont icon-arrow-right"></i>
						<i class="move ar-animated ar-delay-2s iconfont icon-arrow-right"></i>
						<i class="move ar-animated ar-delay-1s iconfont icon-arrow-right"></i>
						<i class="move ar-animated iconfont icon-arrow-right"></i>
					</span>
				</div>

			</div>

		</div>

	</section>
	<!-- #Content end --> 


	<!-- Footer -->
	<footer id="footer"></footer>
	<!-- #Footer end -->


</div>
<!-- #Wrapper end --> 
</body>
</html>