這篇文章主要介紹了css3中顯示隱藏特效代碼有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出祥云免費做網(wǎng)站回饋大家。

代碼：1、“display:none”，可使元素不占據(jù)原位置隱藏；2、“visibility:hidden”，可使元素占據(jù)原位置隱藏；3、“overflow:hidden”，超出元素框時隱藏；4、“opacity:0”，可使元素透明隱藏。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3顯示隱藏特效代碼是什么

在css中，有四種方法來設(shè)置元素隱藏效果。

1、display屬性可設(shè)置元素不占據(jù)原位置隱藏

display 屬性規(guī)定元素應(yīng)該生成的框的類型。屬性值為none時此元素不會被顯示。

示例如下：

p {display: inline}
div {display: none}



本例中的樣式表把段落元素設(shè)置為內(nèi)聯(lián)元素。
而 div 元素不會顯示出來！
div 元素的內(nèi)容不會顯示出來！

輸出結(jié)果：

2、visibility屬性可設(shè)置元素占據(jù)原位置隱藏

visibility 屬性規(guī)定元素是否可見。這個屬性指定是否顯示一個元素生成的元素框。這意味著元素仍占據(jù)其本來的空間，不過可以完全不可見。值 collapse 在表中用于從表布局中刪除列或行。

示例如下：

h2.visible {visibility:visible}
h2.invisible {visibility:hidden}



這是可見的標題
這是不可見的標題

輸出結(jié)果：

3、overflow屬性可設(shè)置超出元素框隱藏

overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情。當(dāng)屬性值為hidden時，內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。

示例如下：

div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden;
}



如果元素中的內(nèi)容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為。

這個屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內(nèi)容也會出現(xiàn)滾動條。默認值是 visible。

輸出結(jié)果：

4、opacity可設(shè)置元素透明隱藏

opacity 屬性設(shè)置元素的不透明級別。

示例如下：

本元素的不透明度是 0.5。請注意，文本和背景色都受到不透明級別的影響。