css显示隐藏

内容大部分来自张鑫旭大大的《css世界》一书
自己为了以后偷懒，写下来以后项目直接可以抄了(＾－＾)V

/*
1、
元素不可见，不占据空间，辅助设备无法访问，同时不渲染
使用html<script>用于影藏

eg:
<script type = 'text/html'>
<img src='1.jpg'>
</script>

script不支持嵌套
多个层的话需要使用textarea标签
eg：
<script type = 'text/html'>
   <img src='1.jpg'>
   <textarea style='display:none'>
       <img src='2.jpg'>
   </textarea>
</script>

/*
2、
元素不可见，同时不占据空间，辅助设备无法访问，但是资源有加载
*/
.dn{
display:none;
}

/*
3、
元素不可见，同时不占据空间，辅助设备无法访问，但是资源有加载，并且要有淡出淡入的效果
*/
.hidden{
   position: absolute;
   visibility: hidden;
   /*实测还是要的*/
   opacity: 0;
}

.hidden_up{
   position: absolute;
   visibility: hidden;
   /*实测还是要的*/
   opacity: 0;
   /*ps:y轴正方向向下*/
   transform: translateY(-10px);
   -webkit-transition:visibility 0.3s,opacity 0.3s,transform 0.3s;
   -o-transition:visibility 0.3s,opacity 0.3s,transform 0.3s;
   transition:visibility 0.3s,opacity 0.3s,transform 0.3s;
}

/*
4、
元素不可见，不可点击，辅助设备无法访问，占据空间，资源有加载
*/
.vh{
visibility: hidden;
}

/*
5、
元素不可见，不可点击，不占据空间，辅助设备可以访问（键盘），资源有加载
*/
.clip{
   position: absolute;
   clip: rect(0 0 0 0);
}
.out{
   position: relative;
   left: -999em;
}

/*
6、
元素不可见，不可点击，占据空间，辅助设备可以访问（键盘），资源有加载
*/
.lower{
position: relative;
z-index: -1;
}

/*
7、
元素不可见，可以点击，不占据空间
*/
.opacity{
   position: absolute;
   opacity: 0;
   filter: Alpha(opacity=0);
}

/*
8、
单纯的看不见，位置保留，可点可选
*/
.opacity{
opacity: 0;
filter: Alpha(opacity=0);
}

/*
9、
字体动效
*/
/*html：<div class="title">我是标题文字内容</div>*/
.title {
   width: 8em;
   margin: auto;
   white-space: nowrap;
   animation: textIn 1s both;
   letter-spacing: -200px;
}
@keyframes textIn {
   0% {
       opacity: 0;
       letter-spacing: -200px;
   }
   60% {
       letter-spacing: 5px;
   }
   100% {
       opacity: 1;
       letter-spacing: 0;
   }
}

猜你喜欢