Web-Frontend
CSS-Tutorial
Erstellen Sie einen Menünavigationseffekt basierend auf dem CSS3-Attributübergang
Erstellen Sie einen Menünavigationseffekt basierend auf dem CSS3-Attributübergang
In diesem Artikel wird hauptsächlich der CSS3-basierte Attributübergang zum Erstellen eines Menünavigationseffekts vorgestellt, der die Funktion des dynamischen Änderns des Hintergrundschiebereglers realisieren kann, wenn die Maus über die Menüelemente gleitet. Die Implementierung des CSS3-basierten Attributübergangs ist sehr praktisch und wird benötigt.
Dieser Artikel beschreibt das Beispiel für die Erstellung eines Menünavigationseffekts basierend auf dem CSS3-Attributübergang. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:
CSS3-Navigationsmenü: Wenn sich Ihre Bewegungsebene unter der Anzeigeebene befindet, flackert die Seite durch den Übergang. Der Grund dafür ist ein von Chrome beim ersten Rendern der CSS-Animation generierter Fehler . Obwohl dieses Problem vorerst nicht überprüft werden kann, gibt es derzeit zwei bekannte Lösungen:
-webkit-backface-visibility: Hidden (Legen Sie fest, ob die Rückseite des konvertierten Elements ist sichtbar, wenn man dem Benutzer gegenübersteht: versteckt)
-webkit-transform-style: Preserve-3d; (Legen Sie fest, wie eingebettete Elemente im 3D-Raum gerendert werden: Preserve 3D).
Der Screenshot des Laufeffekts lautet wie folgt:
Der spezifische Code lautet wie folgt:
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<title>css3的属性transition制作菜单导航</title>
<style>
*{margin:0px;padding:0px;}
body{background:#45B5DA;margin:0px;padding:0px;}
.tips{width:370px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
#nav{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-185px;}
li{
width:74px;height:40px;text-align:center;float:left;line-height:40px;color:#fff;text-decoration:none;list-style:none;cursor : pointer;
}
li#chage{
width:70px;height:38px;display:block;position:absolute;left:0px;z-index:-1;border:2px solid #191919;
border-radius:10px;
background:-webkit-gradient(linear, 0 100%, 0 0, from(black), color-stop(0.5, black), color-stop(0.52,#313131), to(#6A6A6A));
box-shadow:0px 2px 0px rgba(255, 255, 255, .3);
-webkit-transform: translate(0px,0px);
-webkit-transition:-webkit-transform .2s ease-out;
}
</style>
</head>
<body>
<section class="tips">
当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条：
-webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏）
-webkit-transform-style: preserve-3d; （设置内嵌的元素在 3D 空间如何呈现：保留 3D ）
qq群:197326136
</section>
<section id="nav">
<li href="#" title＝"css3菜单,css3菜单导航">首页</li>
<li href="#" class="nav_2" onmouseover = "zhj.slide(1);" onmouseout = "zhj.slide(0);">脚本</li>
<li href="#" onmouseover = "zhj.slide(2);" onmouseout = "zhj.slide(0);">特效</li>
<li href="#" onmouseover = "zhj.slide(3);" onmouseout = "zhj.slide(0);">源码</li>
<li href="#" onmouseover = "zhj.slide(4);" onmouseout = "zhj.slide(0);">下载</li>
<li href="javascript:void(0);" id="chage"></li>
</section>
</body>
<script type="text/javascript">
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}
var zhj = {};
zhj.slide = function(index){
var transX = 74*index;
$('chage').style['-webkit-transform'] = 'translate('+transX+'px,0px)';
}
</script>
</html>Das Obige ist das Ganze Ich hoffe, dass der Inhalt dieses Artikels für das Lernen aller nützlich sein wird. Wenn Sie Hilfe benötigen, schauen Sie sich bitte die chinesische PHP-Website an, um weitere verwandte Inhalte zu erhalten!
Verwandte Empfehlungen:
Analyse der Darstellung des Transformationsmodells in CSS3
Das obige ist der detaillierte Inhalt vonErstellen Sie einen Menünavigationseffekt basierend auf dem CSS3-Attributübergang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Windows 11: Der einfache Weg, Startlayouts zu importieren und zu exportieren
Aug 22, 2023 am 10:13 AM
In Windows 11 wurde das Startmenü neu gestaltet und verfügt über einen vereinfachten Satz von Apps, die in einem Seitenraster angeordnet sind, im Gegensatz zum Vorgänger, der Ordner, Apps und Apps im Startmenü hatte. Sie können das Startmenü-Layout anpassen und es auf andere Windows-Geräte importieren und exportieren, um es nach Ihren Wünschen zu personalisieren. In dieser Anleitung besprechen wir Schritt-für-Schritt-Anleitungen zum Importieren des Startlayouts, um das Standardlayout unter Windows 11 anzupassen. Was ist Import-StartLayout in Windows 11? „Startlayout importieren“ ist ein Cmdlet, das in Windows 10 und früheren Versionen zum Importieren von Anpassungen für das Startmenü verwendet wird
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
CSS-Tipp: Verwenden Sie den Übergang, um den Hover-Status beizubehalten
Sep 27, 2022 pm 02:01 PM
Wie kann der Schwebezustand beibehalten werden? Im folgenden Artikel erfahren Sie, wie Sie den Hover-Status beibehalten, ohne JavaScript zu verwenden. Ich hoffe, er hilft Ihnen weiter!
So stellen Sie im Rechtsklick-Menü von Windows 11 standardmäßig „Weitere Optionen anzeigen' ein
Jul 10, 2023 pm 12:33 PM
Eine der nervigsten Änderungen, die wir Benutzer nie wollen, ist die Aufnahme von „Weitere Optionen anzeigen“ in das Kontextmenü mit der rechten Maustaste. Sie können es jedoch entfernen und erhalten das klassische Kontextmenü in Windows 11 zurück. Kein Mehrfachklicken und Suchen nach diesen ZIP-Verknüpfungen in Kontextmenüs mehr. Befolgen Sie diese Anleitung, um unter Windows 11 zu einem vollständigen Kontextmenü mit der rechten Maustaste zurückzukehren. Fix 1 – CLSID manuell anpassen Dies ist die einzige manuelle Methode auf unserer Liste. Sie müssen bestimmte Schlüssel oder Werte im Registrierungseditor anpassen, um dieses Problem zu beheben. Hinweis – Registrierungsänderungen wie diese sind sehr sicher und funktionieren problemlos. Daher sollten Sie eine Sicherung der Registrierung erstellen, bevor Sie dies auf Ihrem System versuchen. Schritt 1 – Probieren Sie es aus
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
Die neueste Version 18.8.0 der Baidu Maps App wurde veröffentlicht. Sie führt erstmals die Ampelradarfunktion ein und fügt eine Parkempfehlungsfunktion in Echtzeit hinzu
Aug 06, 2023 pm 06:05 PM
Sowohl die Android- als auch die iOS-Version der Baidu Map App haben Version 18.8.0 veröffentlicht, die erstmals die Ampelradarfunktion einführt und damit branchenführend ist. Laut offizieller Einführung unterstützt sie nach dem Einschalten des Ampelradars die automatische Erkennung Beidou High-Precision kann die Position von Ampeln während der Fahrt in Echtzeit auslösen und so automatisch eine grüne Welle auslösen. Darüber hinaus bietet die neue Funktion eine vollständig stille Navigation, wodurch der Kartenbereich prägnanter wird, wichtige Informationen auf einen Blick klar sind und keine Sprachübertragung erforderlich ist, sodass sich der Fahrer mehr auf das Fahren konzentrieren kann. Baidu Maps startet eine Ampel-Countdown-Funktion Oktober 2020, unterstützt die Echtzeit-Countdown-Vorhersage. Die Navigation zeigt automatisch die verbleibenden Sekunden des Countdowns an, wenn sie sich einer Ampelkreuzung nähern, sodass Benutzer immer einen Überblick über die Straßenverhältnisse vor sich haben. Ampel-Countdown bis 31. Dezember 2022
Was ist die horizontale Zahl 8 auf der Navigationskarte?
Jun 27, 2023 am 11:43 AM
Die horizontale Zahl 8 auf der Navigationskarte bedeutet Dunst, mäßig ist ein gelbes Warnsignal 8 und stark ist ein orangefarbenes Warnsignal 8.
So entfernen Sie die Option „Im Windows-Terminal öffnen' aus dem Kontextmenü mit der rechten Maustaste in Windows 11
Apr 13, 2023 pm 06:28 PM
Standardmäßig verfügt das Kontextmenü von Windows 11 per Rechtsklick über eine Option namens „Im Windows-Terminal öffnen“. Dies ist eine sehr nützliche Funktion, die es Benutzern ermöglicht, Windows Terminal an einem bestimmten Ort zu öffnen. Wenn Sie beispielsweise mit der rechten Maustaste auf einen Ordner klicken und die Option „Im Windows-Terminal öffnen“ auswählen, wird Windows-Terminal gestartet und legt diesen bestimmten Speicherort als aktuelles Arbeitsverzeichnis fest. Obwohl dies eine großartige Funktion ist, findet nicht jeder Verwendung für diese Funktion. Einige Benutzer möchten diese Option möglicherweise einfach nicht in ihrem Rechtsklick-Kontextmenü haben und möchten sie entfernen, um ihr Rechtsklick-Kontextmenü aufzuräumen.
