几种简单的"元素“消失的方法
几种元素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;
}
效果图
参考资料 ：
