css显示隐藏

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

/*
一、
元素不可见，不占据空间，辅助设备没法访问，同时不渲染
使用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>

*/

/*
二、
元素不可见，同时不占据空间，辅助设备没法访问，可是资源有加载
*/

.dn{
    display:none;
}

/*
三、
元素不可见，同时不占据空间，辅助设备没法访问，可是资源有加载，而且要有淡出淡入的效果
*/

.hidden{
    position: absolute;
    visibility: hidden;
    /*实测仍是要的*/
    opacity: 0;
}

.hidden_up{
    position: absolute;
    visibility: visible;
    /*实测仍是要的*/
    opacity: 1;
    /*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;
}

/*
四、
元素不可见，不可点击，辅助设备没法访问，占据空间，资源有加载
*/

.vh{
    visibility: hidden;
}

/*
五、
元素不可见，不可点击，不占据空间，辅助设备能够访问（键盘），资源有加载
*/

.clip{
    position: absolute;
    clip: rect(0 0 0 0);
}
.out{
    position: relative;
    left: -999em;
}

/*
六、
元素不可见，不可点击，占据空间，辅助设备能够访问（键盘），资源有加载
*/

.lower{
    position: relative;
    z-index: -1;
}

/*
七、
元素不可见，能够点击，不占据空间
*/

.opacity{
    position: absolute;
    opacity: 0;
    filter: Alpha(opacity=0);
}

/*
八、
单纯的看不见，位置保留，可点可选
*/

.opacity{
    opacity: 0;
    filter: Alpha(opacity=0);
}

/*
九、
字体动效
*/
/*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;
    }
}