马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 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 的值移动下就可以看到：
现在我们还是恢复为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 (传送门)速查手册学习。
源码下载：
如果喜欢，别忘了评分 ：
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-2-24 15:00:07
置顶卡
千斤顶
显身卡
发表于 2019-4-22 23:34:39
发表于 2020-3-23 08:35:50
