css repeating-radial-gradient重复径向渐变介绍,以及css波浪线,优惠券,体验券的效果
2017-10-11 15:56

repeating-radial-gradient重复径向渐变介绍

repeating-radial-gradient的语法参数和radial-gradient是一样的,此文就不重复讲解repeating-radial-gradient的语法参数了,我们从实现效果来开始讲解,对于repeating-radial-gradient的语法不熟悉的,可以点击查看radial-gradient语法


repeating-radial-gradient的几个效果

.linear-cont{
    height:300px;
    background:repeating-radial-gradient(ellipse closest-side at center,#D62121,#107475 ,#D62121);
}

repeatingradial.png

这个是repeating-radial-gradient的最基本效果。而相同语法的radial-gradient效果如下:

.linear-cont{
    height:300px;
    background:radial-gradient(ellipse closest-side at center,#D62121,#107475 ,#D62121);
}

repeatingradial2.png

这两个径向渐变的效果是由很大区别的,repeating的效果整体都是椭圆形,空白处重复渲染就会显示第一个或者前几个颜色,而没有repeating的径向渐变空白处会由最后一个颜色填充。在repeating中extend-keyword(closest-side,farthest-corner)关键字没有效果的。

repeating-radial-gradient也是为了颜色重复,比如条形带的实现。

.linear-cont{
    height:300px;
    background:repeating-radial-gradient(ellipse closest-side,#fff 20px,#0E489E 40px);
}

效果如下:

repeatingrt.png


.linear-cont{
    height:300px;
    background:repeating-radial-gradient(ellipse closest-side,#fff,#fff 20px,#D48E20 20px,#D48E20 40px);
}

效果如下:

radialdai.png

借助background-size,和repeat我们可以实现一些特殊的效果。

.linear-cont{
    height:300px;
    background:repeating-radial-gradient(circle closest-side,#fff,#fff 20px,#D48E20 20px,#D48E20 40px) repeat;
    background-size:50px 50px;
}

效果如下:

circles.png

我们可以实现这种效果,我们在此基础上还可以实现一些特殊的效果。

<div class="linear-cont">
</div>
<div class="bolang"></div>
.linear-cont{
    height:200px;
    background:#D48E20;
    background-size:50px 50px;
}
.bolang{
    height:10px;
    background:repeating-radial-gradient(ellipse 20px 10px at top,#D48E20,#D48E20 10px,transparent 10px,transparent 35px) repeat;
    background-size:20px 10px;
}

效果如下:

specialradial.png

哎,就不就是我们原来用图片实现的波浪线么,这个波浪线就是根据上面圆形repeat的效果激发想到的,所以所css的一些基础属性是不变的,但是巧妙的运用,可以帮助我们实现一些特殊的效果。

我们可以使用repeating-radial-gradient或者radial-gradient实现优惠券的效果:

coupons.png

你可以点击这里查看css优惠券效果。demo中只做了webkit和火狐的兼容,请用着两类浏览器打开查看。

贴一下代码:

<style>
       .radial-coupons{
           border:1px solid #bababa;
           box-sizing:border-box;
           padding:8px;
           margin:12px;
           background:#f1f1f1;
         }
       .radial-coupons ul{
           margin:0;
           padding:0;
           list-style:none;
         }
       .coupons-item + .coupons-item{
           margin-top:12px;
         }
       .coupons-item:after{
           content:"";
           display:block;
           visibility:hidden;
           clear:both;
         }
       .coupon-left{
           float:left;
           padding:0 20px;
           height:80px;
           background:#0F9B4E;
           line-height:80px;
           position:relative;
           margin-left:10px;
         }
       .coupon-right{
           height:80px;
           margin-left:4px;
           background:#C91010;
           line-height:80px;
           position:relative;
           margin-right:10px;
           text-indent:6em;
         }
       .coupon-wrapper{overflow:hidden;}
       .coupon-left:before{
           content:"";
           position:absolute;
           z-Index:2;
           left:-8px;
           top:0;
           height:100%;
           width:8px;
           background:repeating-radial-gradient(ellipse 8px 10px at right,#0F9B4E,#0F9B4E 4px,transparent 4px,transparent 12px) repeat-y;
           background:-webkit-repeating-radial-gradient(ellipse 8px 10px at right,#0F9B4E,#0F9B4E 4px,transparent 4px,transparent 12px) repeat-y;
           background:-moz-repeating-radial-gradient(ellipse 8px 10px at right,#0F9B4E,#0F9B4E 4px,transparent 4px,transparent 12px) repeat-y;
           background-size:8px 10px;
       }
       .coupon-left:after{
           content:"";
           position:absolute;
           z-index: 2;
           right:-2px;
           width:2px;
           height:100%;
           background:repeating-radial-gradient(circle 2px at right,transparent,transparent 2px,#0F9B4E 2px,#0F9B4E 6px) repeat-y;
           background:-webkit-repeating-radial-gradient(circle 2px at right,transparent,transparent 2px,#0F9B4E 2px,#0F9B4E 6px) repeat-y;
           background:-moz-repeating-radial-gradient(circle 2px at right,transparent,transparent 2px,#0F9B4E 2px,#0F9B4E 6px) repeat-y;
           background-size: 2px 8px;
       }
      .coupon-right:after{
          content:"";
          position:absolute;
          z-index: 2;
          right:-8px;
          top:0;
          height:100%;
          width:8px;
          background:repeating-radial-gradient(ellipse 8px 10px at left,#C91010,#C91010 4px,transparent 4px, transparent 12px) repeat-y;
          background:-webkit-repeating-radial-gradient(ellipse 8px 10px at left,#C91010,#C91010 4px,transparent 4px, transparent 12px) repeat-y;
          background:-moz-repeating-radial-gradient(ellipse 8px 10px at left,#C91010,#C91010 4px,transparent 4px, transparent 12px) repeat-y;
          background-size: 8px 10px;
      }
    .coupon-right:before{
        content:"";
        position:absolute;
        z-index: 2;
        left:-2px;
        width:2px;
        height:100%;
        background:repeating-radial-gradient(circle 2px at left,transparent,transparent 2px,#C91010 2px,#C91010 6px) repeat-y;
        background:-webkit-repeating-radial-gradient(circle 2px at left,transparent,transparent 2px,#C91010 2px,#C91010 6px) repeat-y;
        background:-moz-repeating-radial-gradient(circle 2px at left,transparent,transparent 2px,#C91010 2px,#C91010 6px) repeat-y;
        background-size:2px 8px;
    }
</style>

对应的html代码如下:

<div class="radial-coupons">
    <ul>
        <li class="coupons-item">
            <div class="coupon-left">优惠券</div>
            <div class="coupon-wrapper">
                <div class="coupon-right">88元</div>
            </div>
        </li>

        <li class="coupons-item">
            <div class="coupon-left">优惠券</div>
            <div class="coupon-wrapper">
                <div class="coupon-right">888元</div>
            </div>
        </li>
        <li class="coupons-item">
            <div class="coupon-left">优惠券</div>
            <div class="coupon-wrapper">
                <div class="coupon-right">999元</div>
            </div>
        </li>
    </ul>
</div>

这其中了除了使用了本文讲的repeating-radial-gradient外,还使用了float实现flex效果的代码。repeating-radial-gradient利用圆形和椭圆的竖着一列repeat的功能,实现波浪线的效果,优惠券中间的特效是两个半圆的波浪线组成的原型虚线效果。“at position”的使用正好使得我们可以显示圆形或者椭圆的一半,就能形成我们需要的波浪线。

repeating-radial-grandient结语

到这一篇文章,我们关于渐变的使用语法以及一些使用介绍就算告一段落了,连接以上三遍文章,我们把linear-gradient,repeating-linear-gradient,radial-gradient,repeating-linear-gradient四个w3c规定的渐变效果都介绍了一遍,通过接地气的语言,希望能帮助更多人,更好的理解和掌握css3渐变色的功能和使用。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(5664)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1