CSS pur pour obtenir un effet de levée de ruban

Utilisez l'action hover pour changer le p de margin-top afin de faire avancer le petit module vers le haut. En même temps, placez deux carrés divisés en deux couleurs le long de la diagonale sous la crosse du petit module, et positionnez-les absolument par rapport au petit module. Vous pouvez créer un simple effet de montée en trois dimensions.
Utilisez simplement border pour réaliser les deux extrémités du ruban et la partie ombre montante.

---

Mais il y a un détail auquel il faut prêter attention :
S'il s'agit d'une barre de navigation, placez la balise p à l'intérieur du a, et mettez le a tag à l'intérieur de la balise span ; je pensais que c'était inutile avant, mais il s'avère que ce span est très utile.
Parce que a doit être supérieur à span, et alors overflow:hidden peut couvrir les parties de la magie qui ne doivent pas être exposées, laissant de la place aux parties qui doivent être exposées.
Ensuite, span et p:before et p:after doivent définir margin-top pour qu'il soit positif, et la valeur de margin-top est exactement égale à la valeur de a supérieure à span.
hover Réglez margin-top:0px; lorsque vous bougez et montez.
Ensuite, vous dites, je ne mets pas span dans p:before, p:after et margin-top, et lorsque hover bouge, je règle margin-top comme négatif, et la valeur est égale à a étant supérieur à span La valeur peut-elle ressortir ?
Non !

Dans le premier cas, ala part supplémentaire augmente, donc la magie peut réussir
Qu'en est-il de la situation ; où il est trop tard ? , a Descendre voir si la partie supplémentaire a disparu ?
Les faits ont prouvé que les filles qui aiment avoir des ennuis sont les plus populaires, oui !

code html :

<p>
    <a href="#"><span>青龙</span></a>
    <a href="#"><span>白虎</span></a>
    <a href="#"><span>玄武</span></a>
    <a href="#"><span>朱雀</span></a>
</p>

code css :

p{
    width:500px;
    margin:200px auto 0px;
}
p:before{
    content:"";
    border:25px solid;
    border-color:#ccc #ccc #ccc transparent;
    margin-top:10px;
    float:left;
}
p:after{
    content:"";
    border:25px solid;
    border-color:#ccc transparent #ccc #ccc;
    margin-top:10px;
    float:left;
}
p span{
    display:inline-block;
    width:100px;
    line-height:50px;
    margin-top:10px;
    text-align:center;
    background:#ccc;
    position:relative;
    transition: background-color 0.5s, margin-top 0.3s;
}
p a{
    color:#000;
    text-decoration:none;
    height:60px;
    overflow:hidden;
    float:left;
}
p span:before{
    content:"";
    border-right:10px solid #000;
    border-bottom:10px solid #ccc;
    position:absolute;
    top:50px;
    left:0px;
}
p span:after{
    content:"";
    border-left:10px solid #000;
    border-bottom:10px solid #ccc;
    position:absolute;
    top:50px;
    right:0px;
}
p a:hover span{
    margin-top:0px;
    background:#0cf;
}

                                     

Utilisez l'action hover pour changer le p de margin-top pour faire monter le petit module, et en même temps placez deux parties divisées en diagonale sous le bout du petit module Des carrés de deux couleurs, positionnés de manière absolue par rapport aux petits modules, peuvent créer un simple effet ascendant tridimensionnel.
Utilisez simplement border pour réaliser les deux extrémités du ruban et la partie ombre montante.

---

Mais il y a un détail à noter :
S'il s'agit d'une barre de navigation, mettez la balise p à l'intérieur du a, et mettez une autre balise a à l'intérieur la balise span ; je pensais que c'était inutile avant, mais il s'avère que ce span est très utile.
Parce que a doit être supérieur à span, et alors overflow:hidden peut couvrir les parties de la magie qui ne doivent pas être exposées, laissant de la place aux parties qui doivent être exposées.
Ensuite, span et p:before et p:after doivent définir margin-top pour qu'il soit positif, et la valeur de margin-top est exactement égale à la valeur de a supérieure à span.
hover Réglez margin-top:0px; lorsque vous bougez et montez.
Ensuite, vous dites, je ne mets pas span dans p:before, p:after et margin-top, et lorsque hover bouge, je règle margin-top comme négatif, et la valeur est égale à a étant supérieur à span La valeur peut-elle ressortir ?
Non !

Dans le premier cas, ala part supplémentaire augmente, donc la magie peut réussir
Qu'en est-il de la situation ; où il est trop tard ? , a Descendre voir si la partie supplémentaire a disparu ?
Les faits ont prouvé que les filles qui aiment avoir des ennuis sont les plus populaires, oui !

code html :

<p>
    <a href="#"><span>青龙</span></a>
    <a href="#"><span>白虎</span></a>
    <a href="#"><span>玄武</span></a>
    <a href="#"><span>朱雀</span></a>
</p>

code css :

p{
    width:500px;
    margin:200px auto 0px;
}
p:before{
    content:"";
    border:25px solid;
    border-color:#ccc #ccc #ccc transparent;
    margin-top:10px;
    float:left;
}
p:after{
    content:"";
    border:25px solid;
    border-color:#ccc transparent #ccc #ccc;
    margin-top:10px;
    float:left;
}
p span{
    display:inline-block;
    width:100px;
    line-height:50px;
    margin-top:10px;
    text-align:center;
    background:#ccc;
    position:relative;
    transition: background-color 0.5s, margin-top 0.3s;
}
p a{
    color:#000;
    text-decoration:none;
    height:60px;
    overflow:hidden;
    float:left;
}
p span:before{
    content:"";
    border-right:10px solid #000;
    border-bottom:10px solid #ccc;
    position:absolute;
    top:50px;
    left:0px;
}
p span:after{
    content:"";
    border-left:10px solid #000;
    border-bottom:10px solid #ccc;
    position:absolute;
    top:50px;
    right:0px;
}
p a:hover span{
    margin-top:0px;
    background:#0cf;
}

Pour un CSS plus pur afin d'obtenir l'effet de levée de ruban, veuillez faire attention au site Web PHP chinois pour les articles connexes !