丝带效果

作者: 前端来入坑 | 来源:发表于2020-01-13 20:45 被阅读0次

丝带效果
丝带绣常用料
CDR制作丝带效果（一）
css3丝带效果
极客标签前端特效资源精品大荟萃#003
花店花艺视频教程:详解：各种丝带花制作过程
vue 小球粒子动画
2017-11-25
丝带
cocosCreator材质effect丝带飘飞效果GLSL语法

image.png

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>几种精美纯CSS3丝带效果-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
h2 {
    font-weight:normal;
    position:relative;
    background:#F4F9FA;
    width:50%;
    color:#F8463F;
    text-align:center;
    padding:10px 20px;
    margin:20px auto 40px;
    text-transform:uppercase;
    border-radius:2px;
}
h2:before,h2:after {
    content:"";
    position:absolute;
    display:block;
    top:-6px;
    border:18px solid #DCF4F4;
}
h2:before {
    left:-36px;
    border-right-width:18px;
    border-left-color:transparent;
}
h2:after {
    right:-36px;
    border-left-width:18px;
    border-right-color:transparent;
}
h2 span:before,h2 span:after {
    content:"";
    position:absolute;
    display:block;
    border-style:solid;
    border-color:#A7CECC transparent transparent transparent;
    top:-6px;
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}
h2 span:before {
    left:0;
    border-width:6px 0 0 6px;
}
h2 span:after {
    right:0;
    border-width:6px 6px 0 0;
}
.silk-ribbon {
    display:block;
    width:48%;
    height:188px;
    position:relative;
    float:left;
    margin-bottom:30px;
    background-color: #ccc;
    color:white;
}
.silk-ribbon:nth-child(even) {
    margin-right:4%;
}
@media (max-width:500px) {
    .ribbon {
    width:100%
}
.silk-ribbon:nth-child(even) {
    margin-right:0%;
}
}
.silk-ribbon1 {
    position:absolute;
    top:-6px;
    right:10px;
}
.silk-ribbon1:after {
    position:absolute;
    content:"";
    display:block;
    width:0;
    height:0;
    border-left:53px solid transparent;
    border-right:53px solid transparent;
    border-top:10px solid #F8463F;
}
.silk-ribbon1 span {
    position:relative;
    display:inline-block;
    text-align:center;
    background:#F8463F;
    font-size:14px;
    line-height:1;
    padding:12px 8px 10px;
    border-top-right-radius:8px;
    width:90px;
}
.silk-ribbon1 span:before,.silk-ribbon1 span:after {
    position:absolute;
    content:"";
    display:block;
}
.silk-ribbon1 span:before {
    background:#F8463F;
    height:6px;
    width:6px;
    left:-6px;
    top:0;
}
.silk-ribbon1 span:after {
    background:#C02031;
    height:6px;
    width:8px;
    border-radius:8px 8px 0 0;
    left:-8px;
    top:0;
}
.silk-ribbon2 {
    display:inline-block;
    width:60px;
    padding:10px 0;
    background:#F47530;
    top:-6px;
    left:25px;
    position:absolute;
    text-align:center;
    border-top-left-radius:3px;
}
.silk-ribbon2:before {
    height:0;
    width:0;
    border-bottom:6px solid #8D5A20;
    border-right:6px solid transparent;
    right:-6px;
    top:0;
}
.silk-ribbon2:before,.silk-ribbon2:after {
    content:"";
    position:absolute;
}
.silk-ribbon2:after {
    height:0;
    width:0;
    border-left:30px solid #F47530;
    border-right:30px solid #F47530;
    border-bottom:30px solid transparent;
    bottom:-30px;
    left:0;
}
.silk-ribbon3 {
    display:inline-block;
    position:absolute;
    width:150px;
    height:50px;
    line-height:50px;
    padding-left:15px;
    background:#59324C;
    left:-8px;
    top:20px
}
.silk-ribbon3:before,.silk-ribbon3:after {
    content:"";
    position:absolute;
}
.silk-ribbon3:before {
    height:0;
    width:0;
    border-bottom:8px solid black;
    border-left:8px solid transparent;
    top:-8px;
    left:0;
}
.silk-ribbon3:after {
    height:0;
    width:0;
    border-top:25px solid transparent;
    border-bottom:25px solid transparent;
    border-left:15px solid #59324C;
    right:-15px;
}
.silk-ribbon4 {
    position:absolute;
    top:15px;
    padding:8px 10px;
    background:#00B3ED;
    box-shadow:-1px 2px 4px rgba(0,0,0,0.5);
}
.silk-ribbon4:before,.silk-ribbon4:after {
    position:absolute;
    content:"";
    display:block;
}
.silk-ribbon4:before {
    width:7px;
    height:100%;
    padding:0 0 7px;
    top:0;
    left:-7px;
    background:inherit;
    border-radius:5px 0 0 5px;
}
.silk-ribbon4:after {
    width:5px;
    height:5px;
    background:rgba(0,0,0,0.35);
    bottom:-5px;
    left:-5px;
    border-radius:5px 0 0 5px;
}
.silk-ribbon5 {
    display:inline-block;
    width:calc(100% + 20px);
    height:50px;
    line-height:50px;
    text-align:center;
    margin-left:-10px;
    margin-right:-10px;
    background:#EDBA19;
    position:relative;
    top:20px;
}
.silk-ribbon5:before {
    content:"";
    position:absolute;
    height:0;
    width:0;
    border-top:10px solid #cd8d11;
    border-left:10px solid transparent;
    bottom:-10px;
    left:0;
}
.silk-ribbon5:after {
    content:"";
    position:absolute;
    height:0;
    width:0;
    border-top:10px solid #cd8d11;
    border-right:10px solid transparent;
    right:0;
    bottom:-10px;
}
.wrap {
    width:100%;
    height:188px;
    position:absolute;
    top:-8px;
    left:8px;
    overflow:hidden;
}
.wrap:before {
    content:"";
    display:block;
    border-radius:8px 8px 0px 0px;
    width:40px;
    height:8px;
    position:absolute;
    right:100px;
    background:#4D6530;
}
.wrap:after {
    content:"";
    display:block;
    border-radius:0px 8px 8px 0px;
    width:8px;
    height:40px;
    position:absolute;
    right:0px;
    top:100px;
    background:#4D6530;
}
.silk-ribbon6 {
    display:inline-block;
    text-align:center;
    width:200px;
    height:40px;
    line-height:40px;
    position:absolute;
    top:30px;
    right:-50px;
    z-index:2;
    overflow:hidden;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    border:1px dashed;
    box-shadow:0 0 0 3px #57DD43,0px 21px 5px -18px rgba(0,0,0,0.6);
    background:#57DD43;
}



.silk-ribbon7 {
    display:inline-block;
    position:absolute;
    width:150px;
    height:50px;
    line-height:50px;
    padding-left:15px;
    background:#59324C;
    left:-8px;
    top:20px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
.silk-ribbon7:before,.silk-ribbon7:after {
    content:"";
    position:absolute;
}
.silk-ribbon7:before {
    height:0;
    width:0;
    border-top:10px solid black;
    border-left:10px solid transparent;
    bottom:-10px;
    left:0;
}
/*.silk-ribbon7:after {
    height:0;
    width:0;
    border-top:25px solid transparent;
    border-bottom:25px solid transparent;
    border-left:15px solid #59324C;
    right:-15px;
}*/
</style>
</head>
<body>
<h2><span>CSS3 丝带</span></h2>
<div class="silk-ribbon"><span class="silk-ribbon1"><span>优惠</span></span>
</div>
<div class="silk-ribbon"><span class="silk-ribbon2">丝<br>带<br>效<br>果<br>2</span></div>
<div class="silk-ribbon"><span class="silk-ribbon3">丝带效果3</span></div>
<div class="silk-ribbon"><span class="silk-ribbon4">丝带效果4</span></div>
<div class="silk-ribbon"><span class="silk-ribbon5">丝带效果5</span></div>
<div class="silk-ribbon">
    <div class="wrap"><span class="silk-ribbon6">丝带效果6</span></div>
</div>
<div class="silk-ribbon"><span class="silk-ribbon7">丝带效果3</span></div>

<script>

</script>

</body>
</html>

http://www.jq22.com/webqd3850

丝带效果
http://www.jq22.com/webqd3850
丝带绣常用料
1.丝带不同的丝带做出来的成品效果是不一样的，要根据不同的图案设计来选择不同宽度和颜色的丝带。从成分上分：尼龙丝带...
CDR制作丝带效果（一）
CDR如何画丝带呢，你可以用贝塞尔工具勾画，也可以使用多边形工具中的完美形状通过转曲得到，然后在填充颜色，表现出明...
css3丝带效果
极客标签前端特效资源精品大荟萃#003
1. 超棒的HTML5丝带背景效果使用HTML5生成的画布彩带效果，使用原生canvas生成最后效果, 动感很逼...
花店花艺视频教程:详解：各种丝带花制作过程
丝带花的做法种类多，一般丝带花的做法很简单，效果却非常的好，而且可以装饰发夹，发箍，还可以做成胸花戴，给包包当装饰...
vue 小球粒子动画
效果图插件three.js，自行下载导入炫彩丝带动画ribbon.js，需要代码的私信我
2017-11-25
听“蓝丝带”、盼“蓝丝带”、剪“蓝丝带”、传“蓝丝带”，看着全国各地的老师都传递着蓝丝带，我的心是忐忑的——不安与...
丝带
挂在树杈上的丝带雪白的，低落的风起她挣扎着，破裂着又一阵风 ...
cocosCreator材质effect丝带飘飞效果GLSL语法
使用GLSL可以制作出很多漂亮有趣的材质效果首先要理解，GLSL管道是消耗的gpu，我们的材质文件处理的是每一个...