純CSS實現絲帶上揚效果
- 高洛峰原創
- 2017-02-15 13:28:271474瀏覽
利用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中文網！