純CSS實現絲帶上揚效果

來源：懂視網責編：小采時間：2020-11-27 18:53:15

純CSS實現絲帶上揚效果

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

推薦度：

點擊下載本文 文檔為doc格式

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

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

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

純CSS實現絲帶上揚效果

第一種情況，a多出來的部分是往上走的，魔術才能成功；
鉆牛角尖的情況呢，a多出來的部分往下走，走光了有沒有？
事實證明啊，喜歡鉆牛角尖的女生最受歡迎了yeah！
純CSS實現絲帶上揚效果

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實現絲帶上揚效果

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中文網！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

純CSS實現絲帶上揚效果

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現 css 絲帶

熱門焦點

純CSS實現絲帶上揚效果

純CSS實現絲帶上揚效果

純CSS實現絲帶上揚效果

最新推薦

猜你喜歡

熱門推薦