Apprenez étape par étape à utiliser CSS3 pour créer un effet de barre de navigation sympa (explication détaillée du code)

Dans l'article précédent "Vous apprendre à utiliser CSS3 pour ajouter des effets tridimensionnels aux polices (avec code)", je vous ai présenté comment utiliser CSS3 pour ajouter des effets tridimensionnels aux polices. L'article suivant vous expliquera comment utiliser CSS3 pour créer un effet de barre de navigation sympa. Voyons comment le faire ensemble.

L'image de l'effet de barre de navigation sympa est la suivante

Comment créer un effet de barre de navigation sympa avec CSS3

1 Créez un nouveau fichier html, écrivez d'abord le div tag input Écrivez <code><ul></ul> pour appeler cet élément de style, qui est le style défini dans le CSS de votre site Web. Vous pouvez modifier le contenu à l'intérieur d'une class. sélecteur de classe et peut être purement statique sur la page Web Contrôler la couleur de la police dans . div标签输入写<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

Échantillon de code

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

Effet de code

2. Pour définir les effets spéciaux CSS de la barre de navigation globalement, écrivez et utilisez le code de chaîne style css="text/css entre les balises head, puis ajoutez le La balise style écrit les marges, le remplissage et la police de paramètre de paragraphe, et height définit la hauteur comme 2000px

Exemple de code🎜rrreee🎜3. Ensuite, ajoutez un arrière-plan à la barre de navigation et entrez les paramètres de couleur, de hauteur et de largeur d'arrière-plan dans nav 🎜🎜Exemple de code🎜rrreee🎜Effet de code🎜🎜🎜🎜4. Ensuite, ajoutez la barre de navigation en haut de la page 🎜🎜Exemple de code 🎜rrreee🎜Effet de code🎜🎜🎜🎜5. Définissez l'image comme marque d'élément de liste dans la liste 🎜🎜Exemple de code🎜rrreee🎜6. épaisseur, underline définit une ligne sous le texte 🎜🎜Exemple de code
🎜rrreee🎜7. Utilisez le style flottant du pointeur de la souris🎜rrreee🎜Effet de code
🎜🎜🎜🎜8. paramètres de bord à la colonne, utilisez l'attribut transition pour définir le temps de l'effet de transition, utilisez transgorm pour allonger la bordure deux fois, puis utilisez opacité code> pour ne pas afficher la marge. 🎜🎜Exemple de code🎜rrreee🎜9. Le dernier paramètre, <code>survolez faites glisser la souris pour changer la couleur en noir et ajouter une rotation et une mise à l'échelle. 🎜🎜Exemple de code🎜rrreee🎜ok, le code d'édition html+css est terminé. 🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo CSS3🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!