鱼C论坛

 找回密码
 立即注册
查看: 3884|回复: 24

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

[复制链接]
发表于 2017-3-10 13:43:45 | 显示全部楼层 |阅读模式

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

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

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

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

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

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

0df83c7e57612f414bbad20cf48c5eb8.png


虽然是三条线,但还是有必要展示下制作方法,这次用a元素,作为DOM容器。
  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.             font-family: ".SF NS Text";
  10.             font-size: 33px;
  11.             background: #000;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <a href="http://bbs.fishc.com/forum-337-1.html">Menu(广告)</a>
  17. </body>
  18. </html>
复制代码

效果图:
Snip20170310_708.png


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

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

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

先对a元素的进行一些初始化设置。
  1.      a{
  2.             text-decoration: none;
  3.             color: deeppink;

  4.             text-indent: 55px;/*让文字右移一点,为三条线腾出空间*/
  5.             display: block;
  6.             line-height: 1.1;/*行高相对值*/
  7.             position: relative;

  8.         }
复制代码

效果图:
Snip20170310_709.png


稍微解释下,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吗?!

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

就这么办,来看下代码:
  1.        a:after{
  2.             content: '';
  3.             position: absolute;/*!!!*/
  4.             width: 33px;

  5.             box-shadow: 0 10px 0 2.3px #FFF,0 20px 0 2.3px #FFF,0 30px 0 2.3px #FFF;
  6.         }
复制代码

效果图:
Snip20170310_710.png


看到木有,三条线就这么出来了~

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

位置还有点靠下,而且靠右边感觉怪怪的
  1.         a:after{
  2.             left: 0;
  3.             top: -3px;
  4.                     }
复制代码

效果图:
Snip20170310_711.png


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


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

把上面的box-shadow,设置挪到a:hover::after中。
  1.       a:hover{
  2.             color: chartreuse;
  3.         }
  4.         a:hover:after{
  5.             box-shadow: 0 10px 0 2.3px #FFF,0 20px 0 2.3px #FFF,0 30px 0 2.3px #FFF;
  6.         }
复制代码

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


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


官方 Web 课程:

评分

参与人数 1荣誉 +4 鱼币 +4 贡献 +3 收起 理由
睦ちゃん她爹 + 4 + 4 + 3 鱼C有你更精彩^_^

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-10 13:49:08 | 显示全部楼层
等等等!这难道就是HTML5+CSS?
为啥我看起觉得好简单,尽管我C才入门…………
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-10 13:51:06 | 显示全部楼层
zealstar 发表于 2017-3-10 13:49
等等等!这难道就是HTML5+CSS?
为啥我看起觉得好简单,尽管我C才入门…………


手绘三条线,能难到哪里
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-10 13:58:44 | 显示全部楼层
不二如是 发表于 2017-3-10 13:51
手绘三条线,能难到哪里

好吧,我会顶你的!尽管目前还未涉及网页部分,不过早晚会用到的吧!学不完的东西啊,我了个去!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-10 14:00:24 | 显示全部楼层
zealstar 发表于 2017-3-10 13:58
好吧,我会顶你的!尽管目前还未涉及网页部分,不过早晚会用到的吧!学不完的东西啊,我了个去 ...



吾生也有涯,而知也无涯.以有涯随无涯,殆已.
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-10 15:04:02 From FishC Mobile | 显示全部楼层
不要什么都学,最好等用的时候再学
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-10 17:00:38 | 显示全部楼层
alltolove 发表于 2017-3-10 15:04
不要什么都学,最好等用的时候再学


不算新东西啦,属于夯实基础~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-8-7 09:35:55 | 显示全部楼层
回复看帖
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-8-7 10:18:48 | 显示全部楼层
交作业!
069-1.jpg
069-2.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-2-28 00:57:50 | 显示全部楼层
支持下,学习了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-3-25 16:02:06 | 显示全部楼层

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-12 10:14:37 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-23 11:17:10 | 显示全部楼层
好好看好好学
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-11-23 11:25:24 | 显示全部楼层
学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-1-13 21:39:51 | 显示全部楼层
RE: 0 0 6 9 - 手绘‘Menu’ [修改]
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-1-20 15:51:02 | 显示全部楼层
的额外发文而非为人潍坊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-7-11 17:17:09 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-1-12 11:49:02 | 显示全部楼层
  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.             font-family: ".SF NS Text";
  10.             font-size: 33px;
  11.             background: #000;
  12.         }
  13.         a{
  14.             text-decoration: none;
  15.             color: deeppink;

  16.             text-indent: 55px;/*让文字右移一点,为三条线腾出空间*/
  17.             display: block;
  18.             line-height: 1.1;/*行高相对值*/
  19.             position: relative;

  20.         }
  21.         a:after{
  22.             content: '';
  23.             position: absolute;/*!!!*/
  24.             width: 33px;
  25.             left: 0;
  26.             top: -3px;
  27.            
  28.         }
  29.         a:hover{
  30.             color: chartreuse;
  31.         }
  32.         a:hover:after{
  33.             box-shadow: 0 10px 0 2.3px #FFF,0 20px 0 2.3px #FFF,0 30px 0 2.3px #FFF;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38. <a href="http://bbs.fishc.com/forum-337-1.html">Menu(广告)</a>
  39. </body>
  40. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-20 19:57:39 | 显示全部楼层

花.png

花.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-27 12:23:45 | 显示全部楼层
哇哦喔喔
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 17:19

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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