这篇文章给大家介绍的内容是关于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>
相关推荐:
Atas ialah kandungan terperinci css3中animation属性实现箭头向右滚动渐隐的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!