用css3做一个关闭icon,

Posted anthonyliu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用css3做一个关闭icon,相关的知识,希望对你有一定的参考价值。

1. 用css3做一个关闭icon

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 大写字母

效果:

2.场景:文本一行右对齐,多行左对齐

.parent {
    flex:1;  //左右撑大
    overflow: visible;   //都是可见的
    white-space:normal //默认,可以换行
    text-align:right //一行向右对齐
}
.child {
     display:inline-block //一行显示行类,多行为块级元素
     text-align: left;  //多行左对齐
     word-break: break-all; 文本打散,解决中英文,中文一行,英文一行
}


<div class="parent">
    <p class="child">显示的文本</p>    
</div>

3.sticky foot

在浏览器中,无论是内容超过一屏还是没有超过一屏,底下的按钮始终在页面底部而不是在浏览器底部。 可以通过一个div放在页面底部:

position:absolute;
width: 100%; 
bottom:0;

4.利用伪类弹框居中

借助伪类设置一个行内元素,设置height=100% vertical-align: middle; 弹出框相对伪类元素的样式显示,可以让弹出框居中。

<style>
    .container{
      position: fixed;
      top:0;
      left:0;
      bottom: 0;
      right: 0;
      background: rgba(0,0,0,.5);
      text-align: center;
      font-size: 0;
      white-space: nowrap;
      overflow: auto;
    }
    .container::after {
       content: \'hello world!\';
       display: inline-block;
       height: 100%;
       vertical-align: middle;
    }
    .dialog {
      display: inline-block;
      width: 10rem;
      height: 10rem;
      vertical-align: middle;
      text-align: left;
      font-size: 14px;
      white-space: normal;
      background: #ffffff;
      padding: 10px;
    }
</style>
<body>
  <div class="container"> 
  <div class="dialog">
      基于vertical-align的水平垂直居中 ---css精选
  </div>
</div>
</body>

5.通过hover伪类来控制div的显示和隐藏

.mgf_tips_icons:hover .float_tips_area{
     display:block;
     border: 1px solid #dedede;
  }

 

以上是关于用css3做一个关闭icon,的主要内容,如果未能解决你的问题,请参考以下文章

我该如何做模态对话框片段(代码在我关闭之前不会执行)

css3中的字体图标 iconfont的问题

CSS3 icon font完全指南

CSS Sprites+CSS3 Icon Font

用 jQuery 关闭 CSS3 动画?

用css3做一个3D立方体