純CSS實現絲帶上揚效果

利用hover動作改變p的margin-top可以使小模組向上走，同時在小模組的屁股下面放兩個沿對角線分成兩種顏色的正方形，相對小模組絕對定位，便可製造出簡單的立體上揚效果。
絲帶的兩頭和上揚的陰影部分用border實現就可以了。

---

不過有一個細節要注意：
如果是導航條的話，p裡放a標籤，a標籤裡還要再放span標籤；我之前也覺得多此一舉，結果證明這個span是大有用處的。
因為a必須要比span高，然後overflow:hidden，才能把魔術不該露出來的部分遮住，該露出來的部分留有餘地。
然後span和p:before和p:after需要設定margin-top為正，margin-top的值5比正好出來比正好出來的值。
hover動作的時候再設定margin-top:0px;，屁顛屁顛往上走。 那你說，我
span和p:before和p:after都不設定margin-top，hover動作的時候再設定margin-topp為負，數值比span高出來的值，可不可以呢？ 不可以！

第一種情況，a

多出來的部分是往上走的，魔術才能成功；

鑽牛角尖的情況呢，a多出來的部分嗎？
事實證明啊，喜歡鑽牛角尖的女生最受歡迎了yeah！

html代碼：

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

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

                               

利用
hover

動作改變

p的margin-top可以使小模組向上走，同時在小模組的屁股下面放兩個沿對角線分成兩種顏色的正方形，相對小模組絕對定位，便可製造出簡單的立體上揚效果。 絲帶的兩頭和上揚的陰影部分用border實現就可以了。
不過有一個細節要注意：

如果是導航條的話，

---

p

裡放
a標籤，a標籤裡還要再放span標籤；我之前也覺得多此一舉，結果證明這個span是大有用處的。 因為a必須要比
span高，然後overflow:hidden，才能把魔術不該露出來的部分遮住，該露出來的部分留有餘地。 然後span和
p:before和p:after需要設定margin-top為正，margin-top的值5比正好出來比正好出來的值。 hover動作的時候再設定margin-top:0px;
，屁顛屁顛往上走。 那你說，我span和p:before
和p:after都不設定margin-top，hover動作的時候再設定margin-topp為負，數值比span高出來的值，可不可以呢？ 不可以！

第一種情況，a

多出來的部分是往上走的，魔術才能成功；

鑽牛角尖的情況呢，a

多出來的部分嗎？

事實證明啊，喜歡鑽牛角尖的女生最受歡迎了yeah！
html代碼：

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

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

更多純CSS實現絲帶上揚效果 相關文章請關注PHP中文網！