Heim >Web-Frontend >CSS-Tutorial >Wie kann ich ein Bild oder Symbol übersetzen, indem ich mit der Maus darüber fahre?
Wie kann ich ein Bild oder Symbol übersetzen, indem ich mit der Maus darüber fahre?
- 王林nach vorne
- 2023-08-31 15:13:021270Durchsuche
In der Webentwicklung ist Interaktivität der Schlüssel für ein unvergessliches Benutzererlebnis. Eine gängige Technik besteht darin, mit der Maus über ein Bild oder Symbol zu fahren, um weitere Informationen anzuzeigen oder das Erscheinungsbild zu ändern. Das Übersetzen durch Bewegen des Mauszeigers über ein Bild oder Symbol ist eine großartige Möglichkeit, Ihrer Website etwas Bewegung und Interesse zu verleihen.
In diesem Artikel erfahren Sie, wie Sie ein Bild oder Symbol beim Hover übersetzen. Um diese Aufgabe zu erfüllen, lernen wir verschiedene Methoden kennen, die nur HTML und CSS verwenden.
Verschiedene Möglichkeiten, ein Bild oder Symbol beim Hover zu übersetzen
Methode 1: CSS-Übergangseffekt
Die erste Möglichkeit, ein Bild oder Symbol beim Hover zu übersetzen, ist die Verwendung von CSS-Übergängen. CSS-Übergänge werden verwendet, um Eigenschaftswerte reibungslos zu ändern, z. B. wenn Sie mit der Maus über ein Element fahren usw. Mithilfe von Übergängen können Sie die Dauer und Zeitfunktion Ihrer Animation festlegen.
Grammatik
Hier ist die Syntax zum Transformieren eines Bildes oder Symbols mithilfe von CSS-Übergängen.
<img src="your-image.jpg" class="trans-image" alt="Wie kann ich ein Bild oder Symbol übersetzen, indem ich mit der Maus darüber fahre?" >
<style>
.trans-image {
transition: transform 0.3s ease-in-out;
}
.trans-image:hover {
transform: translateX(20px);
}
</style>
Beispiel
Im folgenden Beispiel verwenden wir einen Bild-Tag mit dem Klassennamen „trans-image“. Im CSS-Abschnitt setzen wir die Übergangseigenschaft auf „transform“, eine Dauer von 0,3 Sekunden, und verwenden die Beschleunigungsfunktion „ease-in-out“. Wenn wir mit der Maus über ein Element fahren, stellen wir die Transformationseigenschaft so ein, dass sie 30 Pixel nach rechts verschoben wird, wenn es sich um ein Bild handelt, bzw. 20 Pixel nach rechts, wenn es sich um ein Symbol handelt.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.translate-image {
transition: transform 0.7s ease-in-out;
}
.translate-image:hover {
transform: translateX(30px);
}
#icon {
transition: transform 0.7s ease-in-out;
}
#icon:hover {
transform: translateX(20px);
}
</style>
</head>
<body>
<h2>Translating image and icon using CSS Transitions</h2>
<p> Hover over the below image or icon to see the transition </p>
<!-- Translating image on hover using CSS transitions -->
<img src="https://www.tutorialspoint.com/static/images/logo.png?v2" class="translate-image" alt="Wie kann ich ein Bild oder Symbol übersetzen, indem ich mit der Maus darüber fahre?" >
<br>
<!-- Translating icon on hover using CSS transitions -->
<i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</body>
</html>
Methode 2: CSS-Animation
Die erste Möglichkeit, ein Bild oder Symbol beim Hover zu übersetzen, ist die Verwendung von CSS-Animationen. Mit CSS können Elemente mithilfe von HTML animiert werden, ohne dass JavaScript oder Flash erforderlich sind. Hier können wir so viele CSS-Eigenschaften ändern, wie wir möchten, so oft wir möchten.
Um CSS-Animationen zu verwenden, müssen wir der Animation zunächst einige Keyframes zuweisen. Keyframes bestimmen den Stil eines Elements zu bestimmten Zeitpunkten. Durch die Verwendung von Animationen können wir komplexere und dynamischere Effekte als Übergänge erzeugen.
Grammatik
Unten finden Sie die Syntax zum Transformieren eines Bilds oder Symbols mithilfe einer CSS-Animation.
<i class="your-icon"></i>
<style>
.your-icon {
display: inline-block;
width: 50px;
height: 50px;
background-color: #ccc;
animation: translate 0.3s ease-in-out;
}
.your-icon:hover {
animation-name: translate-hover;
}
@keyframes translate {
from {
transform: translateX(0);
}
to {
transform: translateX(10px);
}
}
@keyframes translate-hover {
from {
transform: translateX(10px);
}
to {
transform: translateX(20px);
}
}
</style>
Beispiel
Im folgenden Beispiel verwenden wir ein „i“-Tag mit der Klasse „icon“ und ein -Tag mit der Klasse „image“. Hier setzen wir das Anzeigeattribut auf „inline-block“. Außerdem setzen wir die Animationseigenschaft auf „translate“, die Dauer auf 0,3 Sekunden und die Easing-Funktion auf „ease-in-out“. Wenn wir nun den Mauszeiger bewegen, indem wir Keyframes verwenden und den Animationsnamen auf „translate-hover“ setzen, verschieben wir das Symbol und das Bild um 10 Pixel nach rechts und dann bei nachfolgenden Hovern um 20 Pixel nach rechts.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.image {
display: inline-block;
width: 100px;
height: 100px;
animation: translate 0.3s ease-in-out;
}
.image:hover {animation-name: translate-hover;}
#icon {
display: inline-block;
width: 100px;
height: 100px;
animation: translate 0.3s ease-in-out;
}
#icon:hover {animation-name: translate-hover;}
@keyframes translate {
from {transform: translateX(0);}
to {transform: translateX(10px);}
}
@keyframes translate-hover {
from {transform: translateX(10px);}
to {transform: translateX(20px);}
}
</style>
</head>
<body>
<h2>Translating image and icon using CSS Animations</h2>
<p> Hover over the imgae orr icon to see the effect</p>
<!-- Translating image on hover using CSS Animations -->
<img src="https://fastly.picsum.photos/id/213/200/300.jpg?hmac=t-54teMEgFL3q9WPaRq2t7YdGCU9aIRw77OCaHlSVRs" class="image" alt="Wie kann ich ein Bild oder Symbol übersetzen, indem ich mit der Maus darüber fahre?" > <br>
<!-- Translating icon on hover using CSS Animations -->
<i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</body>
</html>
Methode 3: CSS-Raster
Die erste Möglichkeit, ein Bild oder Symbol beim Hover übersetzen zu lassen, ist die Verwendung von CSS Grid. CSS Grid verwendet ein rasterbasiertes Layoutsystem mit Zeilen und Spalten, wodurch es einfacher wird, Webseiten zu entwerfen, ohne Floats und Positionierungen verwenden zu müssen. Hier geben wir die Position des Rasterelements mithilfe der Eigenschaften „grid-row“ und „grid-column“ an und wenden dann CSS-Transformationseigenschaften wie Rotation oder Translation auf das zu übersetzende Rasterelement an.
Grammatik
Unten finden Sie die Syntax zum Transformieren eines Bilds oder Symbols mithilfe von CSS Grid.
<div class="grid-container">
<img src="your-image.jpg" class="trans-image" alt="Wie kann ich ein Bild oder Symbol übersetzen, indem ich mit der Maus darüber fahre?" >
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
.trans-image {
grid-row: 2 / 3;
grid-column: 2 / 3;
transition: transform 0.3s ease-in-out;
}
.trans-image:hover {
grid-column: 3 / 4;
transform: translateX(10px);
}
</style>
Beispiel
Im folgenden Beispiel haben wir ein „div“-Tag mit der Klasse „container“ definiert. Hier haben wir in CSS die Anzeigeeigenschaft auf „grid“ gesetzt und die Rastervorlage mit jeweils drei Spalten und drei Zeilen definiert mit einer Brucheinheit von 1. Um das Bild und das Symbol zu transformieren, haben wir die Übergangseigenschaft zum „Transformieren“ mit einer Dauer von 0,3 Sekunden und einer Beschleunigungsfunktion von „ease-in-out“ verwendet, die beim Bewegen des Mauszeigers das Bild oder Symbol übersetzt 10 Pixel nach rechts.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.image {
grid-row: 2 / 3;
grid-column: 2 / 3;
transition: transform 0.3s ease-in-out;
}
.image:hover {
grid-column: 3 / 4;
transform: translateX(10px);
}
#icon {
grid-row: 2 / 3;
grid-column: 2 / 3;
transition: transform 0.3s ease-in-out;
}
#icon:hover {
grid-column: 3 / 4;
transform: translateX(10px);
}
</style>
</head>
<body>
<div>
<h2>Translating image and icon using CSS Grid</h2>
<p> Hover over the image or icon to see the effect </p>
<!-- Translating image on hover using CSS Grid -->
<img src="https://www.tutorialspoint.com/static/images/logo.png?v2" class="image" alt="Wie kann ich ein Bild oder Symbol übersetzen, indem ich mit der Maus darüber fahre?" >
<br>
<!-- Translating icon on hover using CSS Grid -->
<i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</div>
</body>
</html>
Fazit
Das Hinzufügen von Interaktivität zu unserer Website kann das Benutzererlebnis verbessern. Eine Möglichkeit, dies zu erreichen, besteht darin, ein Bild oder Symbol beim Bewegen der Maus zu übersetzen. Dieser Effekt kann mit HTML und CSS erreicht werden. Es gibt verschiedene Möglichkeiten, dies zu erreichen, beispielsweise die Verwendung von CSS-Übergängen oder Animationen oder Rastern. Mit all diesen Methoden können wir die Dauer und Zeitfunktion der Animation festlegen und dynamische Effekte erzeugen. Mithilfe dieser Techniken können wir eine ansprechendere Website erstellen, die Ihre Besucher beeindrucken wird.
Das obige ist der detaillierte Inhalt vonWie kann ich ein Bild oder Symbol übersetzen, indem ich mit der Maus darüber fahre?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!