css3中animation属性实现箭头向右滚动渐隐的代码
- 不言原创
- 2018-08-10 11:42:563129浏览
这篇文章给大家介绍的内容是关于css3中animation属性实现箭头向右滚动渐隐的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
这是一个右箭头的小图标。
keyframes 创建一个css3动画用 animation 调用 并用延迟动画的办法 做出匀速滚动的效果。
直接贴上html代码，复制即可运行。
<!DOCTYPE html>
<html dir="ltr">
<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>
<div>
<!-- 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>相关推荐：
以上是css3中animation属性实现箭头向右滚动渐隐的代码的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn