纯CSS实现丝带上扬效果

XanaHopper 发布于2019-08-01 16:12 / 1658人阅读

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

利用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;
}

私有云混合云纯CSS css效果效果显示 css jquery 气球css js效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50369.html

纯CSS实现丝带上扬效果

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

yuanzhanghu 2019-08-30 15:52 评论0 收藏0
纯 CSS3 效果资源收集整理

摘要：纯，不使用，能实现怎样的视觉效果这里收集整理了一些相关资源与工具，欢迎各位补充。出品的纯框架，体积小巧。仅一个标签实现的纯图标库。一个令人印象深刻的图片悬停效果集合，完全基于实现。纯模拟移动设备纯实现模态框使用库把图像转换成属性。 awesome-pure-css-no-javascript 纯 CSS + HTML，不使用 JavaScript，能实现怎样的视觉效果? 这里收集整理...

fancyLuo 2019-08-30 12:51 评论0 收藏0
纯 CSS3 效果资源收集整理

摘要：纯，不使用，能实现怎样的视觉效果这里收集整理了一些相关资源与工具，欢迎各位补充。出品的纯框架，体积小巧。仅一个标签实现的纯图标库。一个令人印象深刻的图片悬停效果集合，完全基于实现。纯模拟移动设备纯实现模态框使用库把图像转换成属性。 awesome-pure-css-no-javascript 纯 CSS + HTML，不使用 JavaScript，能实现怎样的视觉效果? 这里收集整理...

lyning 2019-08-02 18:32 评论0 收藏0
纯 CSS3 效果资源收集整理

摘要：纯，不使用，能实现怎样的视觉效果这里收集整理了一些相关资源与工具，欢迎各位补充。出品的纯框架，体积小巧。仅一个标签实现的纯图标库。一个令人印象深刻的图片悬停效果集合，完全基于实现。纯模拟移动设备纯实现模态框使用库把图像转换成属性。 awesome-pure-css-no-javascript 纯 CSS + HTML，不使用 JavaScript，能实现怎样的视觉效果? 这里收集整理...

zhaofeihao 2019-08-01 15:08 评论0 收藏0
纯css实现选中切换效果

最近不太忙，多写几篇文章。很多时候我们用js来实现视觉效果，其实不用那么麻烦，掌握一些常用的css知识能让你事半功倍，这篇文章讲的是使用纯css来实现一个列表项的选中效果，希望对你有所帮助先上链接，点击预览https://codepen.io/Ritr/pen/B... 实现这个效果只需要简单三步走：0：写一个简单的列表，并且初始化css html代码你喜欢哪种水果 ...

phodal 2019-08-30 11:21 评论0 收藏0