CSS

CSS3径向渐变实现优惠券波浪造型

前言

“等风来不如追风去,追逐的过程就是人生的意义”。

借朋友吉言,“2018在头条,2019成为头条”,这就是我2019的目标,我已经在追风的路上。你呢?不要停下脚步,继续前行吧。

今天来个实用的小知识,看下图:

CSS3径向渐变实现优惠券波浪造型

很多人看到左右的波浪边框,第一想法,应该是用图片实现。现在我们就打破这一想法,用CSS搞定这个效果。

radial-gradient()

radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。

语法: background: radial-gradient(shape size at position, start-color, ..., last-color);

描述
shape 确定圆的类型,ellipse (默认): 指定椭圆形的径向渐变;circle :指定圆形的径向渐变
size 定义渐变的大小,farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角;closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边;closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角;farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边
position 定义渐变的位置,center(默认): 设置中间为径向渐变圆心的纵坐标值;top:设置顶部为径向渐变圆心的纵坐标值;bottom:设置底部为径向渐变圆心的纵坐标值
start-color, ..., last-color 用于指定渐变的起止颜色

波浪造型的产生

<div class="coupon"></div>

这里用radial-gradient绘制一个圆,设置left为1px,top为8px,形成半圆。

.coupon {
    position: relative;
    width: 400px;
    height: 160px;
    margin: 50px auto;
    background-image: 
      radial-gradient(
        circle at 1px 8px, 
        transparent 6px, 
        #ff9e6d 6px, 
        #ff9e6d 0px);
  }

CSS3径向渐变实现优惠券波浪造型

看看原本是这样,这里的left是8px

.coupon {
    ...
    background-image: 
      radial-gradient(
        circle at 8px 8px, 
        transparent 6px, 
        #ff9e6d 6px, 
        #ff9e6d 0px);
    ...
  }

CSS3径向渐变实现优惠券波浪造型

设置背景大小,y轴默认平铺,x轴不允许平铺,形成多个半圆,造就波浪造型。

.coupon {
    ...
    background-image: 
      radial-gradient(
        circle at 1px 8px, 
        transparent 6px, 
        #ff9e6d 6px, 
        #ff9e6d 0px);
    background-size: 200px 18px;
    background-repeat-x: no-repeat;
    ...
  }

CSS3径向渐变实现优惠券波浪造型

同理,我们添加右边波浪,

.coupon {
  ...
  background-image: 
    radial-gradient(
      circle at 1px 8px, 
      transparent 6px, 
      #ff9e6d 6px, 
      #ff9e6d 0px), 
    radial-gradient(
      circle at 199px 8px, 
      transparent 6px, 
      #ff9e6d 6px, 
      #ff9e6d 0px);
  background-size: 200px 18px;
  background-position: 0 0, 200px 0;
  background-repeat-x: no-repeat;
}

CSS3径向渐变实现优惠券波浪造型

添加文字

<div class="coupon">50元</div>

:before伪类,制作中间的虚线,:after伪类,添加“立即领取”文字。同时添加金额(50元)样式。

.coupon {
  ...
  font-size: 60px;
  color: #fff;
  font-weight: bold;
  line-height: 160px;
  padding-left: 60px;
  box-sizing: border-box;
  cursor: pointer;
}
.coupon::before {
  position: absolute;
  content: "";
  left: 240px;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed #fff;
}
.coupon::after {
  position: absolute;
  content: "立即领取";
  font-size: 26px;
  width: 70px;
  top: 50%;
  right: 2%;
  transform: translate(-50%, -50%);
  line-height: 40px;
  letter-spacing: 5px;
}

CSS3径向渐变实现优惠券波浪造型

演示地址:CSS3径向渐变实现优惠券波浪造型

推荐文章

《CSS3 box-shadow实现背景动画》
《从浅到深的学习 CSS3阴影(box-shadow)》
《利用CSS线性渐变、阴影、缩放实现动画下雨效果》

(1)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注