So erstellen Sie einen animierten Banner-Link mit HTML und CSS

Übersicht

Wir können animierte Banner mit HTML und CSS erstellen, HTML liefert das Layout des Banners und CSS liefert den Bannerstil mit animierten Effekten. Manchmal sind in zu Werbezwecken erstellte Banner Links eingebettet. Um die Links hervorzuheben, animieren die Entwickler die Links, sodass sie im gesamten Webinhalt sichtbar sind und das Interesse des Benutzers am Klicken erhöhen.

Grammatik

Die Syntax zum Erstellen von Links in HTML lautet -

<a href="#"></a>

Algorithmus

Schritt 1−Erstellen Sie eine HTML-Datei in einem Texteditor und fügen Sie eine HTML-Vorlage hinzu.

Schritt 2 − Erstellen Sie nun einen übergeordneten Div-Container, der das Banner mit dem Klassennamen „bannerCover“ enthält.

<div class="bannerCover"></div>

Schritt 3 − Erstellen Sie nun ein Untercontainer-Div, das Links und andere Daten enthält, und fügen Sie eine Klasse namens „Banner“ hinzu.

<div class="banner"></div>

Schritt 4 − Fügen Sie nun den Link mithilfe des HTML-Anker-Tags zum Banner hinzu.

<a href="https://www.tutorialspoint.com">tutorialspoint</a>

Schritt 5 − Erstellen Sie nun eine style.css-Datei im selben Ordner und verknüpfen Sie die CSS-Datei mit dem HTML-Dokument.

<link rel="stylesheet" href="style.css">

Schritt 6− Gestalten Sie nun das Banner für jedes Element des HTML.

.bannerCover {
   margin: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.banner{
   box-shadow: 0 0 5px gray;
   padding:2rem;
   border-radius: 5px;
   text-align: center;
}

Schritt 7 − Positionieren Sie das Anker-Tag-Element und animieren Sie den Link mithilfe der Animationseigenschaft.

a {
   text-decoration: none;
   font-weight: 800;
   font-size: 2rem;
   color: green;
   padding: 0 2rem;
   animation: zoomup 1s linear alternate infinite;
}

Schritt 8 − Verwenden Sie Keyframes, um den Banner-Link zu animieren.

@keyframes zoomup{
   0%{
      font-size: 2rem;
   }
   25%{
      font-size: 2rem;
   }
   50%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
   75%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
   100%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
}   

Schritt 9 − Der Animationslink wurde erfolgreich erstellt.

Beispiel

Im obigen Beispiel haben wir einen animierten Link in das Banner eingebaut. Dazu erstellen wir zwei Dateien: index.html und stye.css.

   
   <link rel="stylesheet" href="style.css">
    


   

      

         <a href="https://www.tutorialspoint.com">tutorialspoint</a>
         
(Click the above text to redirect to above page.)
      
   

Das Bild unten zeigt die Ausgabe des obigen Beispiels, standardmäßig ist die Farbe des Links weiß. Im Bild unten befindet sich im Banner ein Text mit der Aufschrift „tutorialspoint“. Wenn der Benutzer diese Funktion in den Browser lädt und auf den roten Hintergrundinhalt klickt, wird er zur verlinkten Webseite weitergeleitet. Die Links im Banner sind animiert und können im Laufe der Zeit kleiner oder größer werden.

Fazit

Da wir im obigen Beispiel animierte Inhalte verwenden, müssen der Name in der CSS-Animationseigenschaft und der Name der Animation im Keyframe identisch sein, um ein bestimmtes Element zu animieren, andernfalls findet die Animation nicht statt.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen animierten Banner-Link mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!