成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

純CSS實(shí)現(xiàn)絲帶上揚(yáng)效果

yuanzhanghu / 1170人閱讀

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

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

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

第一種情況，a多出來的部分是往上走的，魔術(shù)才能成功；
鉆牛角尖的情況呢，a多出來的部分往下走，走光了有沒有？
事實(shí)證明啊，喜歡鉆牛角尖的女生最受歡迎了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;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116405.html

相關(guān)文章

  • 純CSS實(shí)現(xiàn)絲帶上揚(yáng)效果

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

    XanaHopper 評論0 收藏0

  • 純 CSS3 效果資源收集整理

    摘要：純，不使用，能實(shí)現(xiàn)怎樣的視覺效果這里收集整理了一些相關(guān)資源與工具，歡迎各位補(bǔ)充。出品的純框架，體積小巧。僅一個(gè)標(biāo)簽實(shí)現(xiàn)的純圖標(biāo)庫。一個(gè)令人印象深刻的圖片懸停效果集合，完全基于實(shí)現(xiàn)。純模擬移動設(shè)備純實(shí)現(xiàn)模態(tài)框使用庫把圖像轉(zhuǎn)換成屬性。 awesome-pure-css-no-javascript 純 CSS + HTML，不使用 JavaScript，能實(shí)現(xiàn)怎樣的視覺效果? 這里收集整理...

    fancyLuo 評論0 收藏0

  • 純 CSS3 效果資源收集整理

    摘要：純，不使用，能實(shí)現(xiàn)怎樣的視覺效果這里收集整理了一些相關(guān)資源與工具，歡迎各位補(bǔ)充。出品的純框架，體積小巧。僅一個(gè)標(biāo)簽實(shí)現(xiàn)的純圖標(biāo)庫。一個(gè)令人印象深刻的圖片懸停效果集合，完全基于實(shí)現(xiàn)。純模擬移動設(shè)備純實(shí)現(xiàn)模態(tài)框使用庫把圖像轉(zhuǎn)換成屬性。 awesome-pure-css-no-javascript 純 CSS + HTML，不使用 JavaScript，能實(shí)現(xiàn)怎樣的視覺效果? 這里收集整理...

    zhaofeihao 評論0 收藏0

  • 純css實(shí)現(xiàn)選中切換效果

    最近不太忙，多寫幾篇文章。很多時(shí)候我們用js來實(shí)現(xiàn)視覺效果，其實(shí)不用那么麻煩，掌握一些常用的css知識能讓你事半功倍，這篇文章講的是使用純css來實(shí)現(xiàn)一個(gè)列表項(xiàng)的選中效果，希望對你有所幫助 先上鏈接，點(diǎn)擊預(yù)覽https://codepen.io/Ritr/pen/B... 實(shí)現(xiàn)這個(gè)效果只需要簡單三步走：0：寫一個(gè)簡單的列表，并且初始化css html代碼 你喜歡哪種水果 ...

    phodal 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<