利用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
實現就可以了。 不過有一個細節要注意:
裡放
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>
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中文網!