首页 > Web开发 > 详细

用css3做一个关闭icon,

时间:2018-05-21 11:48:35      阅读:375      评论:0      收藏:0      [点我收藏+]

html代码:

<div class="nav-icon">
       <div>合作机构授权<span class="close"></span></div>
</div>

css3代码:

.nav-icon{
        position: relative;
        padding: 24px 0;
        background:#ffffff;
        width: 100%;
        font-family: PingFangSC-Regular;
        font-size: 18px;
        color: rgba(0,0,0,0.75);
        letter-spacing: 0;
        text-align: center;
    }
    .close {
       position: absolute;
       right: 10px;
       line-height: 20px;
       font-size: 30px;
       color: #C0C0C0;
    }
    .close::before {
        content: "\00D7";
    }

对于按钮中的叉按钮,用的是Unicode中的一种标识,以下这些也可以使用,标识 编码(16进制) Name 

? \2716 粗体乘法 
? \2717 交叉 
? \2718 粗体交叉 
× \00D7 乘法符号 
? \2A2F 向量乘积 
x \78 小写字母 
X \58 大写字母

效果:

技术分享图片

 

用css3做一个关闭icon,

原文:https://www.cnblogs.com/liuyinlei/p/9065920.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!