QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码
查看: 382|回复: 5

[系列教程] 0 0 7 4 - 无敌小锯齿

[复制链接]
最佳答案
96 
累计签到:474 天
连续签到:2 天
发表于 2017-3-12 17:43:09 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

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

x
本帖最后由 不二如是 于 2017-3-12 17:43 编辑

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

应征一句规律:

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


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

这次用header举例子
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6.     <style type="text/css">
  7.         body{
  8.             margin: 333px;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <header>此心光明,不假外求</header>
  14. </body>
  15. </html>
复制代码

效果图:
Snip20170312_759.png


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

赶紧妙手回春
3596f1ed5ded25f7ed472f6059afc3aa.png


修改样式,删除body中的margin: 333px
  1.       body{

  2.             background: #9FF;
  3.         }
  4.         header{
  5.             height: 333px;
  6.             width:100%;

  7.             color: #FF0;
  8.             font-size: 55px;
  9.             text-align: center;
  10.             font-family: "Adobe Ming Std";
  11.             background: #000;
  12.         }
复制代码

效果图:
Snip20170312_761.png


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

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

还是用利用45deg,linear-gradient 来生成锯齿,在header添加
  1.          background-image: linear-gradient(45deg,#FFF 50%,transparent 50%);
  2.             background-size: 30px 30px;
复制代码

效果图:
Snip20170312_763.png


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

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

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

  1. background-repeat: repeat-x;
  2.             background-position: 67% 100%
复制代码

效果图:
Snip20170312_764.png


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

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

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

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

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

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

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

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

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

现在占有50%有点太大,缩小一半,并且添加反向的,","隔开即可
  1. background-image: linear-gradient(45deg,#FFF 25%,transparent 25%),
  2.             linear-gradient(-45deg,#FFF 25%,transparent 25%);
复制代码

效果图
Snip20170312_765.png


这个就可爱多了~

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

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

效果图:
游客,如果您要查看本帖隐藏内容请回复




这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑传送门)(不喜欢更要订阅

本帖被以下淘专辑推荐:

1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:588 天
连续签到:13 天
发表于 2017-8-23 08:10:25 | 显示全部楼层
交作业!
074.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-9-8 16:51

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 支持楼主!

查看全部评分

1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:59 天
连续签到:5 天
发表于 2017-3-13 09:00:44 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:588 天
连续签到:13 天
发表于 2017-8-23 07:46:24 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:3 天
连续签到:1 天
发表于 2017-9-8 16:34:22 From FishC Mobile | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!

发表回复

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

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /3 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2017-11-20 19:24

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