我想在我的剧透中添加一个淡入淡出过渡,使用 CSS。这是代码:
HTML:
<button style="position:absolute;left:600px;top:20px" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">See the phrases</button>
<link rel='stylesheet' type='text/css' href='style/spoiler.css'/>
<div id="spoiler" style="display:none;position:absolute;left:600px;top:50px">
<desc1> My phrases:</desc1>
<desc2><ul><li>First phrase</li>
</ul><ul><li>Second phrase</li></ul>
</des2>
</div>
CSS:
#spoiler
{
background:#FCFB8B;
width:280px;
height:200px;
-webkit-box-shadow: inset 0 0 3px #1f325d;
-o-box-shadow: inset 0 0 3px #1f325d;
-moz-box-shadow: inset 0 0 3px #1f325d;
-ms-box-shadow: inset 0 0 3px #1f325d;
box-shadow: inset 0 0 3px #1f325d;
}
#spoiler desc1
{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#FA4646;
}
#spoiler desc2
{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#000000;
position:absolute;
top:10px;
left:-15px;
}
好吧,我试图把这段代码放在 ID 剧透中,但它不起作用。谁能帮我?
-webkit-transition: all .8s ease-in;
-moz-transition: all .8s ease-in;
-o-transition: all .8s ease-in;
-ms-transition: all .8s ease-in;
我尝试使用悬停并工作,但我需要在按下按钮时自动进行转换。我怎么能做到这一点?提前谢谢大家!