Heim > Artikel > Web-Frontend > Das Animationsattribut in CSS3 implementiert den Code, damit der Pfeil nach rechts scrollt und verschwindet

Das Animationsattribut in CSS3 implementiert den Code, damit der Pfeil nach rechts scrollt und verschwindet

不言Original: 2018-08-10 11:42:563117Durchsuche

Dieser Artikel stellt Ihnen den Code für das Animationsattribut in CSS3 vor, um den nach rechts scrollenden und ausgeblendeten Pfeil zu realisieren. Ich hoffe, dass er für Sie hilfreich ist.

Dies ist ein kleines Symbol mit einem Rechtspfeil.

keyframes erstellt eine CSS3-Animation namens Animation und verwendet verzögerte Animationen, um einen einheitlichen Scrolleffekt zu erzeugen.

Fügen Sie den HTML-Code direkt ein, kopieren Sie ihn und führen Sie ihn aus.

<!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>

Verwandte Empfehlungen:

Detaillierte Erklärung der Animationseigenschaften von CSS3 (mit Code)

Wie erstelle ich Pfeile mit CSS? (Codebeispiele für Pfeile in verschiedene Richtungen)

Das obige ist der detaillierte Inhalt vonDas Animationsattribut in CSS3 implementiert den Code, damit der Pfeil nach rechts scrollt und verschwindet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css css3 html animation

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie lösche ich Floats in CSS? Zusammenfassung von fünf Methoden zum Löschen von Floats in CSSNächster Artikel：Wie lösche ich Floats in CSS? Zusammenfassung von fünf Methoden zum Löschen von Floats in CSS

In Verbindung stehende Artikel

Mehr sehen