几种元素or背景“消失”的方法

文档流中依然存在
- opacity:元素的透明程度当值为0 时透明，位置依然“存在”，不具有继承性，但是在子元素未指定opacity时和父元素透明度相同。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .box1 {
      background:yellow;
      height:100px;
      border:5px solid black;
      opacity:0.2
    }
    .box2 {
      background:yellow;
      height:200px;
      opacity:0.6;
      border:5px solid blue;
    }
    .box3 {
      border:5px solid red;
      height:100px;
      opacity
    }
  </style>
</head>
<body>
    <div class="box1">
      ccc
    </div>
    <div class="box2">
      aaa
      <div class="box3">
          bbb
      </div>
    </div>
</body>
</html>

opacity

visibility :值设置为 hidden 时元素隐藏，原文档流位置以空白留存。对其子元素设置 visible让其子元素可见。当列表出现“计数”时，对子元素使用< li style="visibility:visible" > 会将这个li 进行隐藏但是元素所占空间依然存在，且除隐藏的子元素外，其他“序号”不变。应用此属性只进行repaint.
rgba():红-绿-蓝-”透明度“ rgba(255,255,255,0) 最后一个设置为0时是颜色，调节“透明度”可以对背景色进行透明调节， 文档内容不受影响 ，当对背景色设置rgba()时就是对背景色进行设置。关键字值transparent对应的rgba值是 rgba(0,0,0,0) 。

.box {
    background:rgba(255,0,0,0); /* 透明*/
    
    background:rgba(255,0,0,1);/* 红色*/
    
    background:rgba(0,0,0,0); 
    
    background:transparent;
}

使用 position:relative; z-index: -1;实现，依然保存空间

2.在文档流中消失

dispaly : none;
对元素使用，元素在文档流中消失。“计数”子元素使用，子元素会在空间消失，且“序号”也改变。
会进行reflow。

transition （简单用法）

transition 是属性的简写 ( MDN中介绍： transition-property, transition-duration, transition-timing-function, 和 transition-delay ）
只对block 元素生效，作用是为一个元素不同情形下实现不同效果产生“过渡”效果。

transition-delay ： CSS的 transition-delay 属性规定了在过渡效果开始作用之前需要等待的时间。值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
transition-duration： transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。（定义摘自MDN）
transition-property ：指定过渡属性名称，值为none时没有过渡，值是all时应用于所有可被动画的属性，值是IDENT 时，自定义应用此效果的属性；
transition-timing-function ：设置一个函数来实现“曲线”变化的效果

visibility 和 transition 实现过渡

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  </style>
</head>
<body>
  <div class="nav">
    <ul class="father clearfix">
      <li><a href="#">猜你喜欢</a></li>
      <li><a href="#">歌单</a></li>
      <li><a href="#">排行榜</a></li>
      <li><a href="#">电台</a></li>
      <li><a href="#">更多</a>
         <ul class="child">
           <li><a href="#">本地歌曲</a></li>
           <li><a href="#">最近播放</a></li>
           <li><a href="#">我的收藏</a></li>
         </ul>
        
     </ul>
  </div>
</body>
</html>

/* css部分 */

* {
  margin:0;
  padding:0;
} 

ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#000;
}
.clearfix:after {
  content:'';
  display:block;
  clear:both;
}
.nav {
  width:950px;

  margin:10px auto;
}

.father>li {
  float:left;
  position:relative;
}
.father>li a {
  padding-left:18px;
  padding-right:18px;
  border:1px solid #969696;
  border-radius:3px;
}

.father>li a:hover {
  background-color:#eee;
}

.father .child {
  width:160px;
  position:absolute;
  opacity:0;
  transition:opacity .6s;
  visibility:hidden;
}
.father>li:hover .child{
  visibility:visible;
  opacity:1;
}