Heim > Artikel > Web-Frontend > Wie erstelle ich mit CSS einen Anrufanimationseffekt?

Wie erstelle ich mit CSS einen Anrufanimationseffekt?

WBOYnach vorne: 2023-09-02 16:01:021545Durchsuche

Cascading Style Sheets (CSS) ermöglicht es Entwicklern, visuelle Effekte für Ihre Webseiten zu erstellen, um sie attraktiv und benutzerfreundlich zu machen. CSS bietet verschiedene Eigenschaften wie Farben, Flexbox, Raster, Animationen, Schatten usw. für Stilelemente, was zu einer Website führt, die für viele Benutzer attraktiv und benutzerfreundlich ist.

In diesem Artikel haben wir besprochen, wie man mit HTML- und CSS-Designs animatronische Effekte erstellt. Um diesen Effekt zu erzeugen, verwenden wir CSS-Animationseigenschaften und die Box-Shadow-Eigenschaft.

CSS-Animation

Es ermöglicht Entwicklern, unseren Webseiten Animationseffekte wie Bewegung, Vibration usw. hinzuzufügen, um den ästhetischen Wert zu erhöhen.

Grammatik

animation: animation-name | animation-duration | speed;

CSS-Box-Shadow-Eigenschaft

Es ermöglicht Entwicklern, dunkle Farbtöne auf der einen Seite und helle Farbtöne auf der anderen Seite bereitzustellen.

Grammatik

box-shadow: values;

Der Wert dieses Attributs ist -

Keine – Auf dem Element wird kein Schatten angezeigt. Dies ist der Standardwert.
Offset-X − Der Abstand des Schattens vom Element in horizontaler Richtung. Positive Werte für offset-X werfen einen Schatten auf die rechte Seite des Elements, während negative Werte einen Schatten auf die linke Seite des Elements werfen.
Offset-Y − Steuert den vertikalen Abstand des Schattens vom Element. Positive Werte platzieren den Schatten über dem Element, negative Werte platzieren den Schatten unter dem Element.
Unschärferadius – Gibt die Schärfe des Schattens an. Je höher die Zahl, desto unschärfer ist der Schatten, d. h. der Schatten wird größer und heller
Spread-Radius – Gibt die Größe des Schattens an. Wenn sein Wert positiv ist, nimmt die Größe zu. Wenn negativ, wird die Größe reduziert.
Farbe – Gibt die Farbe des Schattens an.
Inset − Es ermöglicht Entwicklern, Schatten zu erstellen, sodass der Inhalt eines Elements scheinbar unterhalb des Randes liegt. Daher entsteht innerhalb des Randes ein Schatten.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

<!DOCTYPE html>
<html>
<head>
   <style>
      #demo {
         border: 5px solid;
         padding: 10px 15px;
         box-shadow: -5px -10px 0px 5px yellow;
      }
   </style>
</head>
<body>
   <h1>The box-shadow property</h1>
   <article id="demo">
      <p>This is an article element with a shadow. It contains four values that are offset-X (horizontal distance), offset-Y (vertical distance), spread radius and color. </p>
   </article>
</body>
</html>

Erstellen Sie Animationseffekte für eingehende Anrufe

Im folgenden Beispiel versuchen wir, mithilfe von CSS Font Awesome-Symbolen ein Telefonklingelsymbol anzuzeigen.

Dann haben wir die Box-Shadow-Eigenschaft und CSS-Animationen verwendet, um den Klingeleffekt zu erstellen. Um die Animationssequenz zu steuern, haben wir @keyframes

Example

Die chinesische Übersetzung lautet:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Incoming Call Animation</title>
   <link rel="stylesheet" href= "https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
   <style>
      body{
         height: 80%;
         margin: 10px;
         padding: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         background: black;
      }
      section{
         position: absolute;
         top: 10%;
         display: flex;
         justify-content: center;
         align-items: center;
         border: 2px solid orange;
         height: 65%;
         width: 40%;
      }
      .call{
         position: relative;
         background: black;
         color: orange;
         font-size: 35px;
         font-weight: bold;
         width: 70px;
         height: 70px;
         border-radius: 100%;
         border: solid 5px black;
         animation: anim 2s ease-in infinite, vibration 2s ease-in infinite;
      }
      .img{
         position: absolute;
         top: 20px;
         left: 20px;
         height: 60px;
         width: 50px;
      }
      @keyframes anim {
         0% {
            box-shadow: 0 1px 0 4px #ffffff;
         }
         10%{
            box-shadow: 0 1px 0 8px rgba(255, 165, 0, 1);
         }
         25% {
            box-shadow: 0 1px 0 12px rgba(255, 210, 128, 1), 0 1px 0 16px rgba(255, 201, 102, 1);
         }
         50% {
            box-shadow: 0 2px 5px 10px rgba(255, 184, 51, 1),  0 2px 5px 23px rgba(248, 248, 255, 1);
         }
      }
      @keyframes vibration {
         0% { transform: rotate(0deg); }
         25% { transform: rotate(20deg); }
         50% { transform: rotate(0deg); }
         75% { transform: rotate(-15deg); }
         100% { transform: rotate(0deg); }
      }
   </style>
</head>
<body>
   <section>
      <div class= "call">
         <i class= "fas fa-solid fa-phone img"> </i>
      </div>
   </section>
</body>
</html>

Das Symbol für eingehende Anrufe wird auf der Webseite angezeigt und der Klingeleffekt wird durch den Animationseffekt beobachtet.

Fazit

Kunden auf dem modernen Technologiemarkt benötigen eine stärkere Website-Beteiligung. An dieser Stelle spielt Animation eine entscheidende Rolle bei der Verbesserung der Kommunikation. Der interaktive Charakter von Animationen fördert die Benutzerinteraktion und verbessert das Benutzererlebnis. Wenn Sie möchten, dass sich Ihre Website von der Konkurrenz abhebt und gleichzeitig von Ihrer Zielgruppe geliebt wird, ist es hilfreich, ein erstklassiges Website-Entwicklungsunternehmen mit der Hinzufügung von Animationen zu Ihrer Website zu beauftragen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen Anrufanimationseffekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Gibt an, wie verschachtelte Elemente im 3D-Raum gerendert werdenNächster Artikel：Gibt an, wie verschachtelte Elemente im 3D-Raum gerendert werden

In Verbindung stehende Artikel

Mehr sehen