0 0 7 4 - 无敌小锯齿

不二如是 · 发表于 2017-3-12 17:43:09

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

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

x

本帖最后由不二如是于 2021-8-11 11:07 编辑

看完73，还能看到这里，说明你的眼睛足够强！

应征一句规律：

杀不死我的，只会让我变得更强

废话不多说，锯齿效果，很常用，属于标准化生产。

这次用header举例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C工作室</title>
    <style type="text/css">
        body{
            margin: 333px;
        }
    </style>
</head>
<body>
    <header>此心光明，不假外求</header>
</body>
</html>

效果图：

初始化的样子，实在有些尴尬。。。

赶紧妙手回春

修改样式，删除body中的margin: 333px

      body{

            background: #9FF;
        }
        header{
            height: 333px;
            width:100%;

            color: #FF0;
            font-size: 55px;
            text-align: center;
            font-family: "Adobe Ming Std";
            background: #000;
        }

效果图：

这些设置，没啥好解释的。

看到黑色和蓝色中间的分界线了吗，在这里进行分割。

还是用利用45deg，linear-gradient 来生成锯齿，在header添加

         background-image: linear-gradient(45deg,#FFF 50%,transparent 50%);
            background-size: 30px 30px;

效果图：

创建一个30*30px的背景图案，以45度，进行默认的从上往下，线性渐变。

0 - 50%是黑白渐变，以下是透明

锯齿是有了，但位置不是我们想要的。。。

background-repeat: repeat-x;
            background-position: 67% 100%

效果图：

通过设置backgound-repeat属性，使得背景图案仅在仅在水平方向上重复，而不是铺满header

然后设置background-positon来设置背景图像的起始位置

第一个值是水平位置，第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

因为只重复水平方向，所以第一个值随便写。

只要垂直位置是100%，header的最底下即可。

现在形成的锯齿很难看。。。

我想要对称的锯齿怎么办呢？

很简答，反向-45度，形成两个大小一样，样子相反的三角拼在一起就是了～

现在占有50%有点太大，缩小一半，并且添加反向的,","隔开即可

background-image: linear-gradient(45deg,#FFF 25%,transparent 25%),
            linear-gradient(-45deg,#FFF 25%,transparent 25%);

效果图

这个就可爱多了～

最后，只要设定锯齿颜色跟背景色一样，锯齿就搞定了：

background-image: linear-gradient(45deg,#9FF 25%,transparent 25%),
            linear-gradient(-45deg,#9FF 25%,transparent 25%);

和70用的套路都一样：”障眼法“

效果图：

游客，如果您要查看本帖隐藏内容请回复

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

aswyamato1989 · 发表于 2017-8-23 08:10:25

交作业！

无鹰 · 发表于 2017-3-13 09:00:44

学习一下.

aswyamato1989 · 发表于 2017-8-23 07:46:24

回复看帖！

豆呐呐 · 发表于 2017-9-8 16:34:22

膜拜一下

庚午 · 发表于 2018-2-19 11:17:13

栗子很棒，讲解很细，楼主最棒

a211827754 · 发表于 2018-8-23 17:04:52

好好看好好学

想成大神 · 发表于 2018-12-15 13:10:35

真好

莫希 · 发表于 2019-1-14 13:28:46

RE: 0 0 7 4 - 无敌小锯齿 [修改]

suweixuan1998 · 发表于 2020-1-13 11:21:53

合并的对称锯齿有点小瑕疵，中间出现一条合并的裂痕，希望后续学习的过程能够解决这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C工作室</title>
    <style type="text/css">
        body{

            background: #9FF;
        }
        header{
            height: 333px;
            width:100%;

            color: #FF0;
            font-size: 55px;
            text-align: center;
            font-family: "Adobe Ming Std";
            background-color: #000;

            background-image: linear-gradient(45deg,#9FF 25%,transparent 25%),
            linear-gradient(-45deg,#9FF 25%,transparent 25%);
            background-size: 30px 30px;
            background-repeat: repeat-x;
            background-position: 67% 100%

        }
    </style>
</head>
<body>
<header>此心光明，不假外求</header>
</body>
</html>

小脑斧 · 发表于 2020-3-31 17:47:15

287187056 · 发表于 2020-4-2 04:28:44

提示: 作者被禁止或删除内容自动屏蔽

红tea少年 · 发表于 2022-5-28 12:22:32

看看啊

账号		自动登录	找回密码
密码			立即注册

287187056 287187056 当前离线 UID 104738 日志相册贡献荣誉积分 128 狗仔卡头像被屏蔽	发表于 2020-4-2 04:28:44 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报显身卡

[庖丁解牛] 0 0 7 4 - 无敌小锯齿

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

评分

本帖被以下淘专辑推荐:

点评

评分