css3中两个类设置了不同的（transition）过度动画，为什么前一个类的过度动画会影响下一个类的过度动画？ 30
代码如下：<!DOCTYPEhtml><metacharset=utf-8><style>#di{margin:100px0px0px200px;width:185px;...
代码如下：
<!DOCTYPE html>
<meta charset=utf-8>
<style>
#di{
margin:100px 0px 0px 200px;
width:185px;
height:185px;
border:1px solid #d9d9d9;
border-radius:50%;
}
#jz{
transform:scale(0.99);
width:185px;
height:185px;
position:relative;
left:-1px;
top:-1px;
border:1px solid #fff;
border-radius:50%;
transition:all 0.6s ease-in-out 0s;
}
h1{
position:relative;
left:50px;
top:56px;
}
#jz:hover{
transform:scale(0);
}
#dh{
margin:100px 0px 0px 200px;
width:185px;
height:185px;
border:1px solid #d9d9d9;
border-radius:50%;
background:#000;
filter:alpha(Opacity=50);
opacity: 0.5;
transition:transform 0.4s ease-in-out 1s;
}
#dh:hover{
filter:alpha(Opacity=50);
opacity: 1;
}
</style>
<html lang="zh">
<body>
<div id="di">
<div id="jz">
<h1>HTML5</h1>
<div>
</div>
<div id="dh">
</div>
</body>
</html>
搞不清楚为什么类jz的过度（由大到小的过度）效果会影响到后一个类dh的过度（颜色过度）效果？（貌似类dh的过度没起到作用，只是鼠标移动上去立刻变成黑色）用什么办法解决哦？ 展开
<!DOCTYPE html>
<meta charset=utf-8>
<style>
#di{
margin:100px 0px 0px 200px;
width:185px;
height:185px;
border:1px solid #d9d9d9;
border-radius:50%;
}
#jz{
transform:scale(0.99);
width:185px;
height:185px;
position:relative;
left:-1px;
top:-1px;
border:1px solid #fff;
border-radius:50%;
transition:all 0.6s ease-in-out 0s;
}
h1{
position:relative;
left:50px;
top:56px;
}
#jz:hover{
transform:scale(0);
}
#dh{
margin:100px 0px 0px 200px;
width:185px;
height:185px;
border:1px solid #d9d9d9;
border-radius:50%;
background:#000;
filter:alpha(Opacity=50);
opacity: 0.5;
transition:transform 0.4s ease-in-out 1s;
}
#dh:hover{
filter:alpha(Opacity=50);
opacity: 1;
}
</style>
<html lang="zh">
<body>
<div id="di">
<div id="jz">
<h1>HTML5</h1>
<div>
</div>
<div id="dh">
</div>
</body>
</html>
搞不清楚为什么类jz的过度（由大到小的过度）效果会影响到后一个类dh的过度（颜色过度）效果？（貌似类dh的过度没起到作用，只是鼠标移动上去立刻变成黑色）用什么办法解决哦？ 展开
1个回答
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
