欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

纯CSS实现丝带上扬效果

程序员文章站 2022-03-29 14:11:40
...
利用hover动作改变pmargin-top可以使小模块向上走,同时在小模块的屁股下面放两个沿对角线分成两种颜色的正方形,相对小模块绝对定位,便可以制造出简单的立体上扬效果。
丝带的两头和上扬的阴影部分用border实现就可以了。

不过有一个细节需要注意:
如果是导航条的话,p里放a标签,a标签里还要再放span标签;我之前也觉得多此一举,结果证明这个span是大有用处的。
因为a必须要比span高,然后overflow:hidden,才能把魔术不该露出来的部分遮住,该露出来的部分留有余地。
然后spanp:beforep:after需要设置margin-top为正,margin-top的值正好等于aspan高出来的值。
hover动作的时候再设置margin-top:0px;,屁颠屁颠往上走。
那你说,我spanp:beforep:after都不设置margin-tophover动作的时候再设置margin-top为负,数值等于aspan高出来的值,可不可以呢?
不可以!
纯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;
}


利用hover动作改变pmargin-top可以使小模块向上走,同时在小模块的屁股下面放两个沿对角线分成两种颜色的正方形,相对小模块绝对定位,便可以制造出简单的立体上扬效果。
丝带的两头和上扬的阴影部分用border实现就可以了。


不过有一个细节需要注意:
如果是导航条的话,p里放a标签,a标签里还要再放span标签;我之前也觉得多此一举,结果证明这个span是大有用处的。
因为a必须要比span高,然后overflow:hidden,才能把魔术不该露出来的部分遮住,该露出来的部分留有余地。
然后spanp:beforep:after需要设置margin-top为正,margin-top的值正好等于aspan高出来的值。
hover动作的时候再设置margin-top:0px;,屁颠屁颠往上走。
那你说,我spanp:beforep:after都不设置margin-tophover动作的时候再设置margin-top为负,数值等于aspan高出来的值,可不可以呢?
不可以!
纯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实现丝带上扬效果 相关文章请关注PHP中文网!

相关标签: css