鱼C论坛

 找回密码
 立即注册
查看: 1902|回复: 8

[奇技淫巧] 纯CSS写一张优惠卷

[复制链接]
发表于 2019-2-24 15:00:07 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

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

Snip20190225_47.png


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

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

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

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

径向渐变由中心点定义。

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

语法:
  1. background: radial-gradient(shape size at position, start-color, ..., last-color);
复制代码


Snip20190225_48.png


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




实操

基本的代码结构:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C-优惠卷</title>
  6.     <style>
  7.         
  8.     </style>
  9. </head>
  10. <body>
  11. <div class="coupon">66元</div>
  12. </body>
  13. </html>
复制代码


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

先用 radial-gradient 绘制一个圆,设置 left 为1px,top 为8px,形成半圆:
  1. .coupon {
  2.             position: relative;
  3.             width: 400px;
  4.             height: 160px;
  5.             margin: 50px auto;
  6.             background-image:
  7.                     radial-gradient(
  8.                             circle at 1px 8px,
  9.                             transparent 6px,
  10.                             #2ebb96 6px,
  11.                             #2ebb96 0px);
  12.         }
复制代码

Snip20190225_49.png


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

暂时去掉文本,看到:
Snip20190225_50.png


其实是一个完整的圆,被移到了边界而已,只要将 circle at 的值移动下就可以看到:
  1. circle at 8px 8px
复制代码

Snip20190225_51.png


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

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

Snip20190225_52.png


同理我们添加右边的并设置双边的效果:
  1. .coupon {
  2.             position: relative;
  3.             width: 400px;
  4.             height: 160px;
  5.             margin: 50px auto;
  6.             background-image:
  7.                     radial-gradient(
  8.                     /*左边*/
  9.                             circle at 1px 8px,
  10.                             transparent 6px,
  11.                             #2ebb96 6px,
  12.                             #2ebb96 0px),
  13.                     /*右边*/
  14.                     radial-gradient(
  15.                             circle at 199px 8px,
  16.                             transparent 6px,
  17.                             #2ebb96 6px,
  18.                             #2ebb96 0px);
  19.             /*波浪造型*/
  20.             background-size: 200px 18px;
  21.             background-repeat-x: no-repeat;
  22.             /*设置双边*/
  23.             background-position: 0 0, 200px 0;
  24.         }
复制代码

Snip20190225_53.png


基本样式就是出来了!

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

:before 伪类,制作中间的虚线:
  1. /*制作虚线*/
  2.         .coupon::before {
  3.             position: absolute;
  4.             content: "";
  5.             left: 240px;
  6.             top: 0;
  7.             bottom: 0;
  8.             width: 0;
  9.             border-left: 1px dashed #fff;
  10.         }
复制代码

Snip20190225_54.png


:after 伪类,添加“立即领取”文字:
  1. /*立刻领取*/
  2.         .coupon::after {
  3.             position: absolute;
  4.             content: "立即领取";
  5.             font-size: 26px;
  6.             width: 70px;
  7.             top: 50%;
  8.             right: 2%;
  9.             transform: translate(-50%, -50%);
  10.             line-height: 40px;
  11.             letter-spacing: 5px;
  12.         }
复制代码

Snip20190225_55.png



同时添加金额(66元)样式:
  1. .coupon {
  2.             ...
  3.             /*添加文字样式*/
  4.             font-size: 60px;
  5.             color: #fff;
  6.             font-weight: bold;
  7.             line-height: 160px;
  8.             padding-left: 60px;
  9.             box-sizing: border-box;
  10.             cursor: pointer;
  11.         }
复制代码

Snip20190225_56.png


大功告成!

Snip20190225_57.png


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

源码下载:
游客,如果您要查看本帖隐藏内容请回复






                               
登录/注册后可看大图


如果喜欢,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑&#9758;传送门)(不喜欢更要订阅
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-4-22 23:34:39 | 显示全部楼层
谢谢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-4-25 14:23:26 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-12-31 18:46:33 | 显示全部楼层
学习一波
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-23 08:35:50 | 显示全部楼层
这也太nb了
虽然用ps更简单
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-5-16 19:53:35 From FishC Mobile | 显示全部楼层
ihyvycy
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-7-9 11:03:24 | 显示全部楼层
学习了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-10-7 16:35:18 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-12-17 21:51:26 | 显示全部楼层
哈哈哈
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 19:51

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表