資訊專欄INFORMATION COLUMN
摘要：利用動作改變的可以使小模塊向上走，同時在小模塊的屁股下面放兩個沿對角線分成兩種顏色的正方形，相對小模塊絕對定位，便可以制造出簡單的立體上揚效果。絲帶的兩頭和上揚的陰影部分用實現就可以了。動作的時候再設置，屁顛屁顛往上走。
利用hover動作改變div的margin-top可以使小模塊向上走，同時在小模塊的屁股下面放兩個沿對角線分成兩種顏色的正方形，相對小模塊絕對定位，便可以制造出簡單的立體上揚效果。
絲帶的兩頭和上揚的陰影部分用border實現就可以了。
不過有一個細節需要注意：
如果是導航條的話，div里放a標簽，a標簽里還要再放span標簽；我之前也覺得多此一舉，結果證明這個span是大有用處的。
因為a必須要比span高，然后overflow:hidden，才能把魔術不該露出來的部分遮住，該露出來的部分留有余地。
然后span和div:before和div:after需要設置margin-top為正，margin-top的值正好等于a比span高出來的值。
hover動作的時候再設置margin-top:0px;，屁顛屁顛往上走。
那你說，我span和div:before和div:after都不設置margin-top，hover動作的時候再設置margin-top為負，數值等于a比span高出來的值，可不可以呢？
不可以！
第一種情況，a多出來的部分是往上走的，魔術才能成功；
鉆牛角尖的情況呢，a多出來的部分往下走，走光了有沒有？
事實證明啊，喜歡鉆牛角尖的女生最受歡迎了yeah！
html代碼：
css代碼：
div{
width:500px;
margin:200px auto 0px;
}
div:before{
content:"";
border:25px solid;
border-color:#ccc #ccc #ccc transparent;
margin-top:10px;
float:left;
}
div:after{
content:"";
border:25px solid;
border-color:#ccc transparent #ccc #ccc;
margin-top:10px;
float:left;
}
div 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;
}
div a{
color:#000;
text-decoration:none;
height:60px;
overflow:hidden;
float:left;
}
div span:before{
content:"";
border-right:10px solid #000;
border-bottom:10px solid #ccc;
position:absolute;
top:50px;
left:0px;
}
div span:after{
content:"";
border-left:10px solid #000;
border-bottom:10px solid #ccc;
position:absolute;
top:50px;
right:0px;
}
div a:hover span{
margin-top:0px;
background:#0cf;
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50369.html
摘要：利用動作改變的可以使小模塊向上走，同時在小模塊的屁股下面放兩個沿對角線分成兩種顏色的正方形，相對小模塊絕對定位，便可以制造出簡單的立體上揚效果。絲帶的兩頭和上揚的陰影部分用實現就可以了。動作的時候再設置，屁顛屁顛往上走。 利用hover動作改變div的margin-top可以使小模塊向上走，同時在小模塊的屁股下面放兩個沿對角線分成兩種顏色的正方形，相對小模塊絕對定位，便可以制造出簡單的...
摘要：純，不使用，能實現怎樣的視覺效果這里收集整理了一些相關資源與工具，歡迎各位補充。出品的純框架，體積小巧。僅一個標簽實現的純圖標庫。一個令人印象深刻的圖片懸停效果集合，完全基于實現。純模擬移動設備純實現模態框使用庫把圖像轉換成屬性。 awesome-pure-css-no-javascript 純 CSS + HTML，不使用 JavaScript，能實現怎樣的視覺效果? 這里收集整理...
摘要：純，不使用，能實現怎樣的視覺效果這里收集整理了一些相關資源與工具，歡迎各位補充。出品的純框架，體積小巧。僅一個標簽實現的純圖標庫。一個令人印象深刻的圖片懸停效果集合，完全基于實現。純模擬移動設備純實現模態框使用庫把圖像轉換成屬性。 awesome-pure-css-no-javascript 純 CSS + HTML，不使用 JavaScript，能實現怎樣的視覺效果? 這里收集整理...
最近不太忙，多寫幾篇文章。很多時候我們用js來實現視覺效果，其實不用那么麻煩，掌握一些常用的css知識能讓你事半功倍，這篇文章講的是使用純css來實現一個列表項的選中效果，希望對你有所幫助 先上鏈接，點擊預覽https://codepen.io/Ritr/pen/B... 實現這個效果只需要簡單三步走：0：寫一個簡單的列表，并且初始化css html代碼 你喜歡哪種水果 ...
閱讀 1794·2021-11-18 10:02
閱讀 3524·2021-11-16 11:45
閱讀 1786·2021-09-10 10:51
閱讀 2106·2019-08-30 15:43
閱讀 1372·2019-08-30 11:23
閱讀 1484·2019-08-29 11:07
閱讀 1892·2019-08-23 17:05
閱讀 1394·2019-08-23 16:14
