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

0 0 6 9 - 手绘‘Menu’

本帖最后由 不二如是 于 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;
      }
效果图：
**** Hidden Message *****

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

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

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

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

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

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


手绘三条线，能难到哪里{:10_297:}

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

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

好吧，我会顶你的！尽管目前还未涉及网页部分，不过早晚会用到的吧！{:10_250:}学不完的东西啊，我了个去！

不二如是 发表于 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

{:7_146:}

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

哇哦喔喔
页: [1] 2
查看完整版本: 0 0 6 9 - 手绘‘Menu’