0 0 6 9 - 手绘‘Menu’

不二如是 · 发表于 2017-3-10 13:43:45

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

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

x

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

在68用伪元素结合transform画了一个“关闭”按钮

这次画一个，菜单Menu的吧，当然，只是图标，暂时没有下拉条等。

好吧，说白了，就是三条线。。。

虽然是三条线，但还是有必要展示下制作方法，这次用a元素，作为DOM容器。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
body{
margin: 333px;
font-family: ".SF NS Text";
font-size: 33px;
background: #000;
}
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html">Menu（广告）</a>
</body>
</html>

复制代码

效果图：

没错，href又是给小天才养殖场打广告。。。

注意，虽然此时没有设定超链接颜色，但由于设置背景色为黑色，所以自动变成紫色。

现在就要在Menu左边，绘制三条线了。

先对a元素的进行一些初始化设置。

a{
text-decoration: none;
color: deeppink;
text-indent: 55px;/*让文字右移一点，为三条线腾出空间*/
display: block;
line-height: 1.1;/*行高相对值*/
position: relative;
}

复制代码

效果图：

稍微解释下，line-height的属性值。

1.1是一个相对值，因为在body中设定font-size为33px。

所以此时，line-height就是33*1.1=36.3

好了，三线位也留出来了，可以开始画了。

怎么画呢？

在68由于只有两天线，所以用before和after两个伪元素就可以搞定。

但是，现在是三条线。。。

运用聪明的大脑想一想，还记得在0 0 6 2 - 三点唤醒Loading动画用的box-shadow吗？！

将阴影值设置为最小，并设置阴影尺寸，让他类似‘实体化’

就这么办，来看下代码：

a:after{
content: '';
position: absolute;/*!!!*/
width: 33px;
box-shadow: 0 10px 0 2.3px #FFF,0 20px 0 2.3px #FFF,0 30px 0 2.3px #FFF;
}

复制代码

效果图：

看到木有，三条线就这么出来了～

利用box-shadow添加了3个白色阴影，纵向每隔10px一个。

位置还有点靠下，而且靠右边感觉怪怪的

a:after{
left: 0;
top: -3px;
}

复制代码

效果图：

left设置为0即可将阴影移到右边，此外上面设置的text-indent也发挥了作用。

最后，再来点hover特效，增加点B格。

把上面的box-shadow，设置挪到a:hover::after中。

a:hover{
color: chartreuse;
}
a:hover:after{
box-shadow: 0 10px 0 2.3px #FFF,0 20px 0 2.3px #FFF,0 30px 0 2.3px #FFF;
}

复制代码

效果图：

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

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

）

官方 Web 课程：

zealstar · 发表于 2017-3-10 13:49:08

等等等！这难道就是HTML5+CSS？
为啥我看起觉得好简单，尽管我C才入门…………

不二如是 · 发表于 2017-3-10 13:51:06

zealstar 发表于 2017-3-10 13:49
等等等！这难道就是HTML5+CSS？
为啥我看起觉得好简单，尽管我C才入门…………

手绘三条线，能难到哪里

zealstar · 发表于 2017-3-10 13:58:44

不二如是发表于 2017-3-10 13:51
手绘三条线，能难到哪里

好吧，我会顶你的！尽管目前还未涉及网页部分，不过早晚会用到的吧！

学不完的东西啊，我了个去！

不二如是 · 发表于 2017-3-10 14:00:24

zealstar 发表于 2017-3-10 13:58
好吧，我会顶你的！尽管目前还未涉及网页部分，不过早晚会用到的吧！学不完的东西啊，我了个去 ...

吾生也有涯,而知也无涯.以有涯随无涯,殆已.

alltolove · 发表于 2017-3-10 15:04:02

不要什么都学，最好等用的时候再学

不二如是 · 发表于 2017-3-10 17:00:38

alltolove 发表于 2017-3-10 15:04
不要什么都学，最好等用的时候再学

不算新东西啦，属于夯实基础~

aswyamato1989 · 发表于 2017-8-7 09:35:55

回复看帖

aswyamato1989 · 发表于 2017-8-7 10:18:48

交作业！

helingyuan · 发表于 2018-2-28 00:57:50

支持下，学习了

高冷 · 发表于 2018-3-25 16:02:06

！

floride · 发表于 2018-8-12 10:14:37

a211827754 · 发表于 2018-8-23 11:17:10

好好看好好学

小丸子hjm · 发表于 2018-11-23 11:25:24

学习

莫希 · 发表于 2019-1-13 21:39:51

RE: 0 0 6 9 - 手绘‘Menu’ [修改]

houyi299 · 发表于 2019-1-20 15:51:02

的额外发文而非为人潍坊

天地~玄黄 · 发表于 2019-7-11 17:17:09

看看

suweixuan1998 · 发表于 2020-1-12 11:49:02

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
body{
margin: 333px;
font-family: ".SF NS Text";
font-size: 33px;
background: #000;
}
a{
text-decoration: none;
color: deeppink;
text-indent: 55px;/*让文字右移一点，为三条线腾出空间*/
display: block;
line-height: 1.1;/*行高相对值*/
position: relative;
}
a:after{
content: '';
position: absolute;/*!!!*/
width: 33px;
left: 0;
top: -3px;
}
a:hover{
color: chartreuse;
}
a:hover:after{
box-shadow: 0 10px 0 2.3px #FFF,0 20px 0 2.3px #FFF,0 30px 0 2.3px #FFF;
}
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html">Menu（广告）</a>
</body>
</html>

复制代码

小脑斧 · 发表于 2020-3-20 19:57:39

weiter · 发表于 2020-3-27 12:23:45

哇哦喔喔

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

[庖丁解牛] 0 0 6 9 - 手绘‘Menu’

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

评分

本帖被以下淘专辑推荐:

浏览过的版块