L'attribut d'animation en CSS3 implémente le code pour que la flèche défile vers la droite et disparaisse-tutoriel CSS-php.cn

L'attribut d'animation en CSS3 implémente le code pour que la flèche défile vers la droite et disparaisse

不言

Libérer： 2018-08-10 11:42:56

original

3179 Les gens l'ont consulté

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>

Copier après la connexion

Recommandations associées :

Explication détaillée des propriétés d'animation de CSS3 (avec code)

Comment le réaliser avec flèche CSS ? (Exemples de code pour les flèches dans différentes directions)

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!