0 0 6 8 - 第一个手绘‘关闭’钮

不二如是 · 发表于 2017-3-9 11:13:32

购买主题 已有 8 人购买 本主题需向作者支付 2 鱼币 才能浏览

dreamdnj · 发表于 2017-3-10 08:30:10

简直一模一样

会魔法的魔法 · 发表于 2017-4-20 20:32:24

不能再像

aswyamato1989 · 发表于 2017-8-7 09:34:46

交作业！

auyhin丶 · 发表于 2017-8-15 16:58:29

我觉得应该是上移3px.
每个伪选择器都设置为块状和height: 3px;
我觉得那两根横线加起来应该是6px.

所以我上移了3px.看我的图

有没有很整齐

隨鈊乄鎍慾 · 发表于 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>

suweixuan1998 · 发表于 2020-1-12 11:14:01

<!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(-2.2px) rotate(-45deg);
        }
    </style>
</head>
<body>
<span class="close">关闭</span>
</body>
</html>

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

@不二如是

老师上移1.5px是这样

上移3px是这样的

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

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 57321 狗仔卡	发表于 2017-3-9 11:13:32 \| 显示全部楼层 \|阅读模式购买主题已有 8 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 37
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

评分