純CSS實現(xiàn)絲帶上揚效果

XanaHopper 發(fā)布于2019-08-01 16:12 / 1903人閱讀

摘要：利用動作改變的可以使小模塊向上走，同時在小模塊的屁股下面放兩個沿對角線分成兩種顏色的正方形，相對小模塊絕對定位，便可以制造出簡單的立體上揚效果。絲帶的兩頭和上揚的陰影部分用實現(xiàn)就可以了。動作的時候再設(shè)置，屁顛屁顛往上走。

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

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

第一種情況，a多出來的部分是往上走的，魔術(shù)才能成功；
鉆牛角尖的情況呢，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;
}