常用的CSS效果总结

遮罩层效果

• 通过设置top、right、bottom、left为0，使得遮罩层覆盖整个可视区域
• 如果页面中是有滚动条的，就涉及到需要给body增加overflow: ‘hidden’
• background-color: rgba(0, 0, 0 , 0.5) 使得背景颜色更加清晰

<div id="bg-gray" class="bg" v-if="viewShowGrayBg">
  <button class="btn btn-creat bg-btn" id="bg-btn">增加</button>
  <div class="bg-tip box" id="bg-tip">
    <a href="#" class="close pop-close" @click="closeBg">×</a>
    <div class="box-inner">
      <h2 class="bold text-red">增加**</h2>
      <p>***支持**啦，体验一下吧！</p>
      <img src="./asset/img/dog-bg.png">
      <button class="btn btn-red" @click="closeBg">我知道了</button>
    </div>
  </div>
</div>

关于遮罩层颜色，在最开始的时候，我用的是下面这样

.bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    z-index: 1001;
    left: 0;
}

出现的结果就是浮层上面的文字以及设置的白色背景都显的很浅（主要是opacity使得遮罩这一层的颜色透明度都是0.5），后面修改为下面的样式

.bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0 , 0.5);
    z-index: 1001;
    left: 0;
}

这样的话，遮罩层上面的文字背景什么的就比较清晰

小三角的指示

<div class="bg-tip box" id="bg-tip">
  <a href="#" class="close pop-close" @click="closeBg">×</a>
  <div class="box-inner">
    <h2 class="bold text-red">增加**</h2>
    <p>***支持**啦，体验一下吧！</p>
    <img src="./asset/img/do-bg.png">
    <button class="btn btn-red" @click="closeBg">我知道了</button>
  </div>
</div>

    .box{
        position: relative;
        width: 330px;
        height: 130px;
    }
    .box:before{
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        left: -14px;
        top: 55px;
        border-bottom: 7px solid transparent;
        border-right: 7px solid #ffffff;
        border-left: 7px solid transparent;
        border-top: 7px solid transparent;
    }

毫无疑问这个是指向左边的指示，正方形的沿对角线的四份中的右边部分，所以右边部分是#fffffff的背景色

×叉号

.pop-close {
  position: absolute;
  right: 10px;
  top: 5px;
  line-height: 30px;
}
.close {
  cursor: pointer!important;
}

开启/关闭按钮

<span class="switcher ml5 " :class="{'on': popData.isChecked}" @click="modifyCheckStatus">
  <em class="switcher-button"></em>
</span>

sass

    .switcher-button{
        position: absolute;
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius:100%;
        background-color: #fff;
        border:1px solid #ccc;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        left: 0;
        top:0;
    }
    &.on{
        background-color: #20d08c;
        .switcher-button{
            border-color:#20d08c;
            -webkit-transform: translate(14px);
            -moz-transform: translate(14px);
            -ms-transform: translate(14px);
            -o-transform: translate(14px);
            transform: translate(14px);
        }
    }

css

.switcher {
    display:inline-block;
    height:14px;
    width:28px;
    -webkit-border-radius:14px;
    -moz-border-radius:14px;
    border-radius:14px;
    background-color:#ddd;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    -ms-transition:all .3s;
    -o-transition:all .3s;
    transition:all .3s;
    cursor:pointer;
    position:relative
}
.switcher .switcher-button {
    position:absolute;
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:100%;
    background-color:#fff;
    border:1px solid #ccc;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    -ms-transition:all .3s;
    -o-transition:all .3s;
    transition:all .3s;
    left:0;
    top:0
}
.switcher.on {
    background-color:#20d08c
}
.switcher.on .switcher-button {
    border-color:#20d08c;
    -webkit-transform:translate(14px);
    -moz-transform:translate(14px);
    -ms-transform:translate(14px);
    -o-transform:translate(14px);
    transform:translate(14px)
}