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: 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;
}

/*
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;
    }
}