鱼C论坛

 找回密码
 立即注册
查看: 2322|回复: 7

[庖丁解牛] 0 0 6 8 - 第一个手绘‘关闭’钮

[复制链接]
发表于 2017-3-9 11:13:32 | 显示全部楼层 |阅读模式
购买主题 已有 8 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

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

使用道具 举报

发表于 2017-3-10 08:30:10 | 显示全部楼层
简直一模一样
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-20 20:32:24 | 显示全部楼层
不能再像
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-8-7 09:34:46 | 显示全部楼层
交作业!
068.jpg

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

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

使用道具 举报

发表于 2017-8-15 16:58:29 | 显示全部楼层
我觉得应该是上移3px.
每个伪选择器都设置为块状和height: 3px;
我觉得那两根横线加起来应该是6px.
所以我上移了3px.看我的图

有没有很整齐
x.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 2 反对 0

使用道具 举报

发表于 2018-7-10 11:29:16 | 显示全部楼层
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C工作室-Close</title>
    <style type="text/css">
        body{
            background: #000;
            margin: 333px;
        }
        .close{
            font-size:0;
            display:block;
        }
        .close::before,.close::after{
            content:"";
            width:66px;
            height:3px;
            display:block;
            background:#efb;
        }
        .close::before{
            background:#f88;
            transform:rotate(45deg);
        }
        .close::after{
            transform:translateY(-1.5px) translateX(1.5px) rotate(-45deg);
        }
    </style>
</head>
<body>
<span class="close">关闭</span>
</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-12 11:14:01 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室-Close</title>
  6.     <style type="text/css">
  7.         body{
  8.             background: #000;
  9.             margin: 333px;
  10.         }
  11.         .close{
  12.             font-size: 0;/*隐藏字体*/
  13.             display: block;/*设置为块状元素*/
  14.         }
  15.         .close::before,.close::after{
  16.             content: '';
  17.             width: 66px;
  18.             height: 3px;
  19.             display: block;
  20.             background: #EFB;
  21.         }
  22.         .close::before{
  23.             background: #F88;
  24.             transform: rotate(45deg);
  25.         }
  26.         .close::after{
  27.             transform: translateY(-2.2px) rotate(-45deg);
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <span class="close">关闭</span>
  33. </body>
  34. </html>
复制代码
1578798805(1).jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

@不二如是

老师上移1.5px是这样
203444tgjssy1l41ulsym8.jpg
上移3px是这样的
花.png

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

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-3-29 05:45

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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