|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
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帖子,请订阅 专辑☞( 传送门)( 不喜欢更要订阅 ) |
|