Maison >interface Web >tutoriel CSS >L'attribut d'animation en CSS3 implémente le code pour que la flèche défile vers la droite et disparaisse
L'attribut d'animation en CSS3 implémente le code pour que la flèche défile vers la droite et disparaisse
- 不言original
- 2018-08-10 11:42:563177parcourir
Cet article vous présente le code de l'attribut d'animation en CSS3 pour réaliser la flèche qui défile vers la droite et s'estompe. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Il s'agit d'une petite icône avec une flèche vers la droite.
les images clés créent une animation CSS3 appelée animation et utilisent une animation retardée pour créer un effet de défilement uniforme.
Collez directement le code html, copiez et exécutez.
<!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>Recommandations associées :
Explication détaillée des propriétés d'animation de CSS3 (avec code)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!