纯CSS实现丝带上扬效果
hover
动作改变p
的margin-top
可以使小模块向上走,同时在小模块的屁股下面放两个沿对角线分成两种颜色的正方形,相对小模块绝对定位,便可以制造出简单的立体上扬效果。丝带的两头和上扬的阴影部分用
border
实现就可以了。不过有一个细节需要注意:
如果是导航条的话,p
里放a
标签,a
标签里还要再放span
标签;我之前也觉得多此一举,结果证明这个span
是大有用处的。
因为a
必须要比span
高,然后overflow:hidden
,才能把魔术不该露出来的部分遮住,该露出来的部分留有余地。
然后span
和p:before
和p:after
需要设置margin-top
为正,margin-top
的值正好等于a
比span
高出来的值。hover
动作的时候再设置margin-top:0px;
,屁颠屁颠往上走。
那你说,我span
和p:before
和p:after
都不设置margin-top
,hover
动作的时候再设置margin-top
为负,数值等于a
比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
实现就可以了。
不过有一个细节需要注意:
如果是导航条的话,p
里放a
标签,a
标签里还要再放span
标签;我之前也觉得多此一举,结果证明这个span
是大有用处的。
因为a
必须要比span
高,然后overflow:hidden
,才能把魔术不该露出来的部分遮住,该露出来的部分留有余地。
然后span
和p:before
和p:after
需要设置margin-top
为正,margin-top
的值正好等于a
比span
高出来的值。hover
动作的时候再设置margin-top:0px;
,屁颠屁颠往上走。
那你说,我span
和p:before
和p:after
都不设置margin-top
,hover
动作的时候再设置margin-top
为负,数值等于a
比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; }
更多纯CSS实现丝带上扬效果 相关文章请关注PHP中文网!
推荐阅读
-
CSS3里怎么实现提示文字的弹窗效果
-
css实现导航栏下划线跟随效果
-
css动画效果——初学者的看法:实现鼠标移入菜单栏文字下出现下划线
-
css3+贝塞尔曲线实现可伸缩input搜索框效果
-
JS+CSS实现滚动数字时钟效果
-
使用checkbox实现纯CSS下拉框_html/css_WEB-ITnose
-
纯CSS3实现彩色缎带效果_html/css_WEB-ITnose
-
纯css实现苹果表盘动画_html/css_WEB-ITnose
-
【CSS】纯CSS实现三级导航(模板)_html/css_WEB-ITnose
-
使用box-shadow属性实现圆角效果代码实例_html/css_WEB-ITnose