課程
/前端開發(fā)
/JavaScript
/JS動畫效果
透明度怎么用css實現(xiàn)變化，厲害的大神，來一段代碼啊
2016-10-17
源自：JS動畫效果 2-2
正在回答
/*注意兼容性問題*/filter:alpha(opacity=50); /*IE*/-moz-opacity:0.5; /*Firefox*/opacity:0.5;/*其他*/
R1tter 提問者
上條回答錯了。應(yīng)該是這樣
background:rgba(0,0,0,.3)
background:rgba(255,255,255,.3)---255代表純黑，.3--代表透明度。
<!DOCTYPE html>
<html>
<head>
<title>透明度</title>
? ? <style type="text/css">
? ? #test{
? ? width:100px;
? ? height:100px;
? ? background-color:red;
? ? ? ? ? ? ?}
? ? ? ? ?#test:hover{
? ? ? ? ? ? filter:alpha(opacity=50);?
? ? ? ? ? ? -moz-opacity:0.5;?
? ? ? ? ? ? opacity:0.5;
? ? ? ? }
? ? </style>
</head>
<body>
<div id="test">CSS實現(xiàn)：鼠標滑過改變透明度</div>
</body>
</html>
舉報
通過本課程JS動畫的學習，從簡單動畫開始，逐步深入各種動畫框架封裝
1 回答透明度動畫
1 回答改變透明度
1 回答為什么執(zhí)行完后 不能復(fù)原寬度 ，透明度可以。
2 回答透明度一直閃？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2016-10-17
/*注意兼容性問題*/
filter:alpha(opacity=50); /*IE*/
-moz-opacity:0.5; /*Firefox*/
opacity:0.5;/*其他*/
2016-10-17
上條回答錯了。應(yīng)該是這樣
background:rgba(0,0,0,.3)
2016-10-17
background:rgba(255,255,255,.3)---255代表純黑，.3--代表透明度。
2016-10-17
<!DOCTYPE html>
<html>
<head>
<title>透明度</title>
? ? <style type="text/css">
? ? #test{
? ? width:100px;
? ? height:100px;
? ? background-color:red;
? ? ? ? ? ? ?}
? ? ? ? ?#test:hover{
? ? ? ? ? ? filter:alpha(opacity=50);?
? ? ? ? ? ? -moz-opacity:0.5;?
? ? ? ? ? ? opacity:0.5;
? ? ? ? }
? ? </style>
</head>
<body>
<div id="test">CSS實現(xiàn)：鼠標滑過改變透明度</div>
</body>
</html>