Hinzufügen von Animationen zum Inhalt Eigenschaft, nach Schweben

Was ich versuche, ist eine Animation zu erreichen, wenn Sie ein Element wie folgt schweben:
Hinzufügen von Animationen zum Inhalt Eigenschaft, nach Schweben

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); 
 
.home:hover::after{ 
 
    content: " Home"; 
 
}

<a href="#" class="home"><i class="fa fa-home"></i></a>

Also, wenn Sie die a schweben, einige zusätzlicher Text wird angezeigt, aber ich konnte keinen Übergang für eine reibungslose Anzeige finden. Stört es nicht zu antworten, transition: all ... zu verwenden, weil das nicht funktioniert. Live-Beispiel der Website finden Sie unter http://www.testingc.ga oder im folgenden Ausschnitt.

iframe Schnipsel (die Navigation Öffnen Sie die Elemente mit dem content: "Text" auf schweben zu sehen.

iframe{ 
 
    border: none; 
 
    width: 100vw; 
 
    height: 100vh; 
 
}

<iframe src="https://www.tc.gamingprouk.net">Error</iframe>

Jede Hilfe wäre willkommen!

Quelle

2017-01-28 Zeus Zdravkov

Sie Javascript und Jquery auf Ihrem Tag hinzugefügt, aber Sie es reine CSS wollen, aktualisieren Sie Ihren Beitrag – Roljhon

Was sind Sie versuchen genau zu erreichen? Das von Ihnen bereitgestellte Beispiel hilft nicht (konnte den TEXT nicht sehen). –

@ibrahim Überprüfen Sie das aktualisierte Snippet. –

So etwas wie das? I machte einen Ein-/Ausblendeffekt mit einem CSS-Übergang

.home { 
 
    position: relative; 
 
} 
 
.home::after { 
 
    content: 'Home'; 
 
    transition: opacity 0.5s; 
 
    opacity: 0; 
 
    pointer-events: none; 
 
    position: absolute; 
 
    margin-left: 10px; 
 
} 
 
.home:hover::after { 
 
    opacity: 1; 
 
    
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> 
 
<a href="#" class="home"><i class="fa fa-home"></i></a>

Quelle

2017-01-28 16:35:18 Giladd

In diesem Fall wird der Text ** Home ** angezeigt, aber mit opacity: 0, bis Sie den Mauszeiger darüber bewegen. Ich füge das zu einer Bootstrap-Navigation hinzu, und es sieht nicht gut aus, wenn der Text immer noch da ist, aber nicht angezeigt wird. Live-Beispiel der Navigation: http://testingc.ga –

Welchen Effekt wollen Sie? Das Ändern der Breite auf/von Null kann auch einfach durchgeführt werden. – Giladd

Jede Art von Animation, aber der Text darf nicht auf der Seite angezeigt werden, bevor der Benutzer ein Element bewegt, da es Platz in der Navigation benötigt, auch wenn es mit opacity: 0 oder color: transparent ist. Es funktioniert mit display: none, aber es gibt keinen Übergang für den Eigenschaftsnamen display. –

Sie den ursprünglichen Zustand versetzt könnte zuerst, dann animieren sie auf schweben

a:after { 
    content: 'Home'; 
    opacity: 0; 
    transition: opacity: 0.5s linear; 
} 

a:hover:after { 
    opacity: 1; 
}

Quelle

2017-01-28 16:42:05 rmcdesign

Animiere die Breite auch in diesem Fall – rmcdesign

Ich habe * {Übergang: alle .5s linear;} in global.css, also Breite ist animiert alredy –

Hinzufügen von Animationen zum Inhalt Eigenschaft, nach Schweben

Antwort

Verwandte Themen