CSS不规则卡片，纯CSS制作优惠券样式，CSS实现锯齿样式

SS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式

之前也有写过 CSS 优惠券样式《CSS3径向渐变实现优惠券波浪造型》，这次再来温习一遍，并且将更为详细的讲解，从布局到具体样式说明，最后定义 CSS 变量，自定义主题颜色。

布局

布局其实是学习前端的重要部分，最常用的方式就是从上而下、从左而右、亦或者两个相结合。

看上图，而这里，我们就只是最简单的布局方式，从上而下：

1、优惠券金额和过期时间

2、优惠券描述

3、按钮（其实按钮也可以放到“2”里面去）

这样分析，我们就有了 html 架构了

<div class="coupon">
  <!-- 1、优惠券金额和过期时间 -->
  <div class="price">
    100元
    <span>优惠券</span>
    <p class="timeout">2020-12-31 18:18:18过期</p>
  </div>

  <!-- 2、优惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、过期作废</p>
  </div>

  <!-- 3、按钮 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式

CSS修饰

接下来我们用 CSS 美化我们的 html 。同理，我们也根据布局分步进行样式书写。

1、优惠券金额和过期时间样式

这里的核心就是上方的凹槽和下方的锯齿

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css变量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式

这里用到了径向渐变，不清楚用法的小伙伴可以看看语法：

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

注释：

（1）、shape 确定圆的类型:

ellipse (默认): 指定椭圆形的径向渐变。

circle ：指定圆形的径向渐变

（2）、size 定义渐变的大小，可能值：

farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角

closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

（3）、position 定义渐变的位置。可能值：

center（默认）：设置中间为径向渐变圆心的纵坐标值。

top：设置顶部为径向渐变圆心的纵坐标值。

bottom：设置底部为径向渐变圆心的纵坐标值。

（4）、start-color, ..., last-color 用于指定渐变的起止颜色。

这样价格上方的凹槽就有了，接下来下方的锯齿我们也可以用径向渐变的方式实现：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

伪类元素 ::after 设置径向渐变背景为一个圆，后进行平铺就形成了锯齿，调整位置。

CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式

其实还有更简单的方法，可以直接用一个虚线边框即可搞定，请看：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式

当然也有缺陷，间隔位置不好控制

2、优惠券描述与按钮优惠券核心锯齿已经搞定了，下面都是小菜啦，非常简单咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按钮样式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式

主题颜色

大家都看到了，我们上方代码主要颜色都采用的变量，而且变量是定义在 .coupon 类选择器里面的。这样的原因是：

1、CSS变量作用域（CSS变量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）

2、方便主题使用

ok，我们就可以copy 多个优惠券，并给每个添加一个不同的 class，比如下方的 theme1、theme2、theme3

<div class="coupon theme1">
  ...
</div>
<div class="coupon theme2">
  ...
</div>
<div class="coupon theme3">
  ...
</div>
<div class="coupon">
  ...
</div>

接下来我们就为不同主题定义不同的颜色变量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

这样，theme1主题下的优惠券，就是紫色主题，theme2主题下的优惠券，就是蓝色主题...，而默认主题颜色就是我们 .coupon 类选择器里面的定义的变量颜色（红色）。

小结

今天你学到了吗？从布局分析到具体实现，再到主题颜色，相信小伙伴们都各有所得。

作一个炫酷的按钮可以为网页增添活力和吸引力。通过巧妙运用CSS动画和过渡效果，我们可以创建一个交互性强、视觉效果炫目的按钮。下面是一个简单的例子，演示如何创建一个炫酷按钮。

1. 基础样式

首先，我们定义按钮的基本样式，包括位置、大小、边框、背景颜色等。

这段代码定义了按钮的基本样式，包括按钮的大小、边框、背景颜色、字体等。

2. 按钮内嵌SVG图标

为按钮内嵌一个SVG图标，增强按钮的视觉效果。

这段代码定义了SVG图标的样式，包括位置、大小、颜色等。

3. 箭头样式

为按钮的右侧和左侧分别添加箭头，并定义它们的样式。

这段代码定义了右侧箭头和左侧箭头的样式，包括位置。

4. 中央圆形

在按钮中央添加一个圆形，用于悬停时的特效。

这段代码定义了中央圆形的样式，包括位置、大小、颜色和透明度。

5. 文本样式

定义按钮文本的样式，包括相对位置和悬停时的调整。

这段代码定义了文本的样式，包括相对位置和悬停时的调整。

6. 鼠标悬停时的效果

定义鼠标悬停时按钮及其各个部分的样式调整。

这段代码定义了鼠标悬停时按钮及其各个部分的样式调整，包括阴影、颜色、边框、位置、颜色和中央圆形的尺寸和透明度。

7. 鼠标按下时的效果

定义鼠标按下时按钮的样式调整，如缩放和边框。

这段代码定义了鼠标按下时按钮的样式调整，包括缩放和边框。

通过巧妙组合以上样式，你可以创建一个具有炫酷效果的按钮，吸引用户的注意力，提升用户体验。在实际项目中，你可以根据需要调整样式和效果，创造出更符合项目风格的炫酷按钮。

8. 完整CSS代码：

近在做公司的登录页，UE同学希望第三方登录的图标在hover的时候有一个圆形的缩放效果（原话是波纹效果-_-||），效果参考腾讯新闻和网易新闻的分享按钮。

腾讯新闻的分享按钮hover效果（新闻页面）：
网易新闻的分享按钮hover效果（新闻页面）：

文章分享之前小编推荐一下我的前端学习群：611256580，里面都是学习前端的，如果你想制作酷炫的网页，想学习前端知识，小编欢迎你的加入。小编会在群中不定期分享干货源码，包括我精心整理的一份前端教程。欢迎各位感兴趣的的小伙伴。

看了一下这两个页面的源码，主要是用了 transform:scale() 和 transition ，自己的最终的实现效果如下：

实现思路大体是模仿网易新闻的，布局如下：

<a href="" class="third-party third-party-weixin"> <i></i>
<span></span>
</a>

外层的a标签用于整体容器和跳转，内层的i标签使用伪元素::before和::after分别作为背景色和前景色，这两个伪元素均绝对定位，垂直水平居中，::after设置缩放属性 transform:scale(0) ,过渡动画属性 transition: all .3s ，正常情况下::before可见，当hover的时候::after设置缩放属性 transform:scale(1) ，两个相邻绝对定位元素在不设置z-index的情况下，文档流在后的元素在上，并且在有过渡动画属性 transition 的情况下实现了缩放动画效果。

span标签用于展示logo，可以是图片或者web字体，只要透明就可以，这里用了图片。 CSS（此处使用的是sass）如下：

.third-party { position: relative; // 为了兼容firefox必须要变成block或inline-block
display: inline-block; width: 48px; height: 48px; margin: {
left: 6%; right: 6%;
}
&:hover { i {
&::after { transform: scale(1);
}
}
} span { // position: relative是为了兼容firefox和IE
position: relative; display: block; width: 48px; height: 48px; background-size: 30px; background-position: center; background-repeat: no-repeat;
} i { position: absolute; top: 0; left: 0; width: 48px; height: 48px;
&::before { content: ''; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
&::after { content: ''; transition: all .3s; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: scale(0);
}
}
&.third-party-weixin { span { background-image: url(../images/login/weixin-64.png);
} i {
&::before { background-color: #20a839;
}
&::after { background-color: #30cc54;
}
}
}
}

这样这个简单的圆形缩放动画就完成啦。

在线咨询

上一篇：Thunderbird for Mac(雷鸟邮件客户端)中文版
下一篇：常见的HTML5开发工具有哪些呢？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS不规则卡片，纯CSS制作优惠券样式，CSS实现锯齿样式

布局

CSS修饰

1、优惠券金额和过期时间样式

主题颜色

小结

您的项目需求