不二如是 发表于 2019-2-24 15:00:07

纯CSS写一张优惠卷

本帖最后由 不二如是 于 2020-3-17 18:59 编辑



本次教程，算是周末练手的一个小项目，主要是对 CSS 几个方法的应用。

看到最上面的图，很多人以为是一张“图片”，可以是，但用 CSS 画出来不是更好吗？！

今天重点要用到：radial-gradient()

radial-gradient() 函数用径向渐变创建 "图像"。

径向渐变由中心点定义。

为了创建径向渐变你必须设置两个终止色。

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



定义玩法就是这样了，我们上手搞起来。



实操

基本的代码结构：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C-优惠卷</title>
    <style>
      
    </style>
</head>
<body>
<div class="coupon">66元</div>
</body>
</html>

接下来所有的样式都在 style 元素中写，不做过多说明了。

先用 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,
                            #2ebb96 6px,
                            #2ebb96 0px);
      }


半圆出来了，由于类 .coupon 对应的 div 中我们设置了文本，所以有点被挡住了。

暂时去掉文本，看到：


其实是一个完整的圆，被移到了边界而已，只要将 circle at 的值移动下就可以看到：
circle at 8px 8px


现在我们还是恢复为1px，现在设置波浪造型。

需要设置背景大小，y轴默认平铺，x轴不允许平铺，形成多个半圆，造就波浪造型：
.coupon {
            position: relative;
            width: 400px;
            height: 160px;
            margin: 50px auto;
            background-image:
                  radial-gradient(
                            circle at 1px 8px,
                            transparent 6px,
                            #2ebb96 6px,
                            #2ebb96 0px);
          /*波浪造型*/
            background-size: 200px 18px;
            background-repeat-x: no-repeat;
      }


同理我们添加右边的并设置双边的效果：
.coupon {
            position: relative;
            width: 400px;
            height: 160px;
            margin: 50px auto;
            background-image:
                  radial-gradient(
                  /*左边*/
                            circle at 1px 8px,
                            transparent 6px,
                            #2ebb96 6px,
                            #2ebb96 0px),
                  /*右边*/
                  radial-gradient(
                            circle at 199px 8px,
                            transparent 6px,
                            #2ebb96 6px,
                            #2ebb96 0px);
            /*波浪造型*/
            background-size: 200px 18px;
            background-repeat-x: no-repeat;
            /*设置双边*/
            background-position: 0 0, 200px 0;
      }


基本样式就是出来了！

剩下的就是优化文本啦，把我们刚才删除的文本恢复。

用 :before 伪类，制作中间的虚线：
/*制作虚线*/
      .coupon::before {
            position: absolute;
            content: "";
            left: 240px;
            top: 0;
            bottom: 0;
            width: 0;
            border-left: 1px dashed #fff;
      }


用 :after 伪类，添加“立即领取”文字：
/*立刻领取*/
      .coupon::after {
            position: absolute;
            content: "立即领取";
            font-size: 26px;
            width: 70px;
            top: 50%;
            right: 2%;
            transform: translate(-50%, -50%);
            line-height: 40px;
            letter-spacing: 5px;
      }



同时添加金额（66元）样式：
.coupon {
            ...
            /*添加文字样式*/
            font-size: 60px;
            color: #fff;
            font-weight: bold;
            line-height: 160px;
            padding-left: 60px;
            box-sizing: border-box;
            cursor: pointer;
      }


大功告成！



上面设计到基本 css 玩法，大家可以通过 鱼C-API (传送门)速查手册学习。

源码下载：**** Hidden Message *****



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

如果喜欢，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ）

cxysailor 发表于 2019-4-22 23:34:39

谢谢

.？。 发表于 2019-4-25 14:23:26

强

一世长安呢 发表于 2019-12-31 18:46:33

学习一波

fishmozi 发表于 2020-3-23 08:35:50

这也太nb了
虽然用ps更简单

言16 发表于 2020-5-16 19:53:35

ihyvycy

awarguly 发表于 2020-7-9 11:03:24

学习了

向日葵cxj 发表于 2020-10-7 16:35:18

{:5_105:}

宋瑶康 发表于 2020-12-17 21:51:26

哈哈哈
页: [1]
查看完整版本: 纯CSS写一张优惠卷