Reines CSS, um einen Ribbon-Raising-Effekt zu erzielen

Verwenden Sie die Aktion hover, um das p von margin-top zu ändern, damit sich das kleine Modul nach oben bewegt. Platzieren Sie gleichzeitig zwei in zwei Farben unterteilte Quadrate entlang der Diagonale unter dem Ende des kleinen Moduls. und positionieren Sie sie absolut relativ zum kleinen Modul. Sie können einen einfachen dreidimensionalen ansteigenden Effekt erzeugen.
Verwenden Sie einfach border, um die beiden Enden des Bandes und den aufsteigenden Schattenteil zu erkennen.

---

Aber es gibt ein Detail, das beachtet werden muss:
Wenn es sich um eine Navigationsleiste handelt, fügen Sie das p-Tag in das a ein und fügen Sie das a ein Tag innerhalb des span-Tags; ich dachte vorher, dass es unnötig wäre, aber es stellt sich heraus, dass dieses span sehr nützlich ist.
Weil a höher sein muss als span, und dann kann overflow:hidden die Teile der Magie abdecken, die nicht freigelegt werden sollen, und so Platz für die Teile lassen, die freigelegt werden sollen.
Dann müssen span und p:before und p:after margin-top positiv festlegen, und der Wert von margin-top entspricht genau dem Wert von a, der höher als span ist.
hoverStellen Sie margin-top:0px; ein, wenn Sie sich bewegen, und gehen Sie nach oben.
Dann sagen Sie, ich setze span nicht in p:before, p:after und margin-top, und wenn sich hover bewegt, setze ich margin-top auf negativ, und der Wert ist gleich a ist höher als span Kann der Wert herauskommen?
Nein!

Im ersten Fall geht ader zusätzliche Teil nach oben, damit die Magie erfolgreich sein kann
Was ist mit der Situation? Wo ist es zu spät? , a Gehen Sie nach unten und sehen Sie, ob der zusätzliche Teil weg ist?
Fakten haben bewiesen, dass Mädchen, die gerne in Schwierigkeiten geraten, am beliebtesten sind, ja!

HTML-Code:

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

CSS-Code:

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;
}

                                     

Verwenden Sie die Aktion hover, um das p von margin-top so zu ändern, dass das kleine Modul nach oben geht und gleichzeitig zwei diagonal geteilte Teile darunter platziert werden Die Endfläche des kleinen Moduls. Quadrate aus zwei Farben, die absolut relativ zu den kleinen Modulen positioniert sind, können einen einfachen dreidimensionalen ansteigenden Effekt erzeugen.
Verwenden Sie einfach border, um die beiden Enden des Bandes und den aufsteigenden Schattenteil zu erkennen.

---

Aber es gibt ein Detail, das beachtet werden muss:
Wenn es sich um eine Navigationsleiste handelt, fügen Sie das p-Tag in das a ein und fügen Sie das a ein Tag innerhalb des span-Tags; ich dachte vorher, dass es unnötig wäre, aber es stellt sich heraus, dass dieses span sehr nützlich ist.
Weil a höher sein muss als span, und dann kann overflow:hidden die Teile der Magie abdecken, die nicht freigelegt werden sollen, und so Platz für die Teile lassen, die freigelegt werden sollen.
Dann müssen span und p:before und p:after margin-top positiv festlegen, und der Wert von margin-top entspricht genau dem Wert von a, der höher als span ist.
hoverStellen Sie margin-top:0px; ein, wenn Sie sich bewegen, und gehen Sie nach oben.
Dann sagen Sie, ich setze span nicht in p:before, p:after und margin-top, und wenn sich hover bewegt, setze ich margin-top auf negativ, und der Wert ist gleich a ist höher als span Kann der Wert herauskommen?
Nein!

Im ersten Fall ader zusätzliche Teil steigt, damit die Magie erfolgreich sein kann
Was ist mit dem Über-? die obere Situation? , a Gehen Sie den zusätzlichen Teil nach unten, ist er weg?
Fakten haben bewiesen, dass Mädchen, die gerne in Schwierigkeiten geraten, am beliebtesten sind, ja!

HTML-Code:

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

CSS-Code:

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;
}

Für mehr reines CSS zur Erzielung des Ribbon-Raising-Effekts beachten Sie bitte die PHP-Chinese-Website für verwandte Artikel!