Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS3 einen coolen Navigationsleisteneffekt erstellen (detaillierte Codeerklärung).

Im vorherigen Artikel „Lernen Sie, wie Sie mit CSS3 dreidimensionale Effekte zu Schriftarten hinzufügen (mit Code)“ habe ich Ihnen gezeigt, wie Sie mit CSS3 dreidimensionale Effekte zu Schriftarten hinzufügen. Im folgenden Artikel erfahren Sie, wie Sie mit CSS3 einen coolen Navigationsleisteneffekt erstellen.

Das Bild des coolen Navigationsleisteneffekts sieht wie folgt aus:

So erstellen Sie einen coolen Navigationsleisteneffekt mit CSS3: 1. Erstellen Sie eine neue HTML-Datei und schreiben Sie zuerst den div Tag-Eingabe: Schreiben Sie <ul></ul>, um dieses Stilelement aufzurufen. Dabei handelt es sich um den Stil, der im CSS Ihrer Website definiert ist. Sie können den Inhalt darin bearbeiten Klassenauswahl und kann auf der Webseite rein statisch sein.

Codebeispieldiv标签输入写<ul></ul>调用这个样式item，就是你网站CSS里定义的样式，可以编辑里面的内容，class是类选择器，可以纯静态在网页中控制字体颜色。

代码示例

<div>
<ul>
    <li><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">游戏</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>

代码效果

2、给导航栏特效css全局的设置，写使用head标签之间加入style css=”text/css串代码然后在style标签写外边距、内边距、段落设置字体，height定义高度为2000px。

代码示例

body{
margin: 0px;
padding: 0px;
font-family: sans-serif;
height: 2000px;
 
}

3、接下来，给导航栏添加背景在nav输入背景颜色、高度和宽度设置。

代码示例

.nav{
width: 100%;
height: 100px;
background-color: red;
}

代码效果

4、接着，给导航栏加固定在页面顶部。

代码示例

.item{
position: fixed;
top:50px;
right:100px;
margin: 0;
padding: 0;
display: flex;

代码效果

5、图像设置为列表中的列表项目标记。

代码示例

.item li{
list-style: none;｝

6、再给添加相对定位、外边距、内边距、字符转为大写，颜色、粗细，underline定义文本下的一条线。

代码示例

.item li a{
position: relative;
display: block;
padding: 10px 20px;
margin: 20px 0;
text-decoration: none;
text-transform: uppercase;/*将字符转为大写*/
color: #262626;
font-weight: bold;
/* transition: 0.5s; */｝

7、使用hover鼠标指针浮动样式

}
.item li a:hover{
color:#fff;
}

代码效果

8、给导航栏添加边缘设置，使用transition属性设置过渡效果的时间，使用transgorm拉长边框两倍，然后使用opacity边距不显示。

代码示例

.item li a:before{

content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top:1px solid #000;
border-bottom:1px solid #000;
transform: scaleY(2);/*拉长边框两倍*/
opacity: 0;/*边距不显示*/
transition: 0.5s;
z-index: -1;
}
.item li a:hover:before{
transform: scaleY(1);/*拉长边框两倍*/
opacity:1;
 
}
.item li a:after{
content:'';
position: absolute;
top: 1px;
left: 0;
width: 100%;
height: 100%;
background: #000;
transform: scale(0);
transition: 0.5s;
z-index: -1;

9、最后一个设置，hover

.item li a:hover:after{ 
transform: scale(1);｝

Codeeffekt

2. Um das CSS für Spezialeffekte in der Navigationsleiste global festzulegen, schreiben und verwenden Sie den Zeichenfolgencode style css="text/css zwischen den Head-Tags und fügen Sie dann das Das style-Tag schreibt die Ränder, den Abstand und die Schriftart für die Absatzeinstellung, und height definiert die Höhe als 2000px

Codebeispielrrreee

3. Fügen Sie als Nächstes einen Hintergrund zur Navigationsleiste hinzu und geben Sie die Einstellungen für Hintergrundfarbe, Höhe und Breite in nav ein. 🎜🎜Codebeispiel🎜rrreee🎜Codeeffekt🎜🎜🎜🎜4. Fügen Sie als Nächstes die Navigationsleiste oben hinzu die Seite. 🎜🎜Codebeispiel 🎜rrreee🎜Codeeffekt🎜🎜🎜🎜5. Legen Sie das Bild als Listenelementmarkierung fest. 🎜🎜Codebeispiel🎜rrreee🎜6. Dicke, underline definiert eine Linie unter dem Text = „https://img.php.cn/upload/image/611/774/137/1630399830122789.jpg“ title="1630399830122789.jpg" alt="WeChat Screenshot_20210831161847.jpg"/>🎜🎜8. Navigation hinzufügen Kanteneinstellungen für die Spalte, verwenden Sie das Attribut transition, um die Zeit des Übergangseffekts festzulegen, verwenden Sie transgorm, um den Rand zweimal zu verlängern, und verwenden Sie dann opacity code> um den Rand nicht anzuzeigen. 🎜🎜Codebeispiel🎜rrreee🎜9. Bei der letzten Einstellung <code>bewegen Sie mit der Maus darüber, um die Farbe in Schwarz zu ändern und Drehung und Skalierung hinzuzufügen. 🎜🎜Codebeispiel🎜rrreee🎜ok, der HTML+CSS-Bearbeitungscode ist abgeschlossen. 🎜🎜Empfohlenes Lernen: 🎜CSS3-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS3 einen coolen Navigationsleisteneffekt erstellen (detaillierte Codeerklärung).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!