国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）第2版 例3-1 CSS3過渡

2年前作者：m0_73657966分類：Toy博客閱讀(30)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）第2版 例3-1 CSS3過渡。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

代碼

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 過渡</title>
<style>
/*顯示*/
.box {
    width: 100px;
    height: 100px;
    background-color: #eee;
    /*透明度*/
    opacity: 1;
    /*過渡*/
    transition: 3s;
}
/*隱藏*/
.box:hover {
    opacity: 0;
}
</style>
</head>

<body>
<div class="box"></div>
</body>
</html>

上述代碼中：
第8-16行代碼定義.box的樣式，設(shè)置透明度為1，transition的值為3s；
第18~20行代碼定義元素的透明度為0，表示當(dāng)鼠標(biāo)指針懸停在.box元素上時(shí)元素隱藏，當(dāng)鼠標(biāo)離開盒子時(shí)元素顯示。

運(yùn)行效果

響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）第2版 例3-1 CSS3過渡,前端,html5,css3
在CSS3之前，由于沒有過渡屬性transition，當(dāng)修飾CSS樣式時(shí)，CSS樣式屬性值就會瞬間變成修改后的值，此時(shí)CSS樣式的變化是沒有過渡效果的，這樣會影響用戶體驗(yàn)。通過CSS的過渡能夠平滑地改變一個元素的CSS值，使元素從一個樣式逐漸過渡到另一個樣式，就很好的解決了這個問題。
利用transition能夠?qū)崿F(xiàn)元素顯示、隱藏的過渡效果。
注意：元素的過渡效果開始于指定的CSS屬性改變值時(shí)，CSS屬性改變的典型時(shí)間是鼠標(biāo)指針位于元素上或離開元素時(shí)；當(dāng)鼠標(biāo)光標(biāo)移動到該元素時(shí)，該元素會逐漸改變它原有樣式。文章來源地址http://www.zghlxwxcb.cn/news/detail-812216.html

到了這里，關(guān)于響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）第2版 例3-1 CSS3過渡的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包