html
x
css
#bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(7,17,27,0.5);
z-index: 999;
display: none;
border-radius: 0.5rem;
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition:all 2s; /* Opera */
}
#box {
position: fixed;
width: 80%;
height: 30%;
top: 30%;
left: 10%;
display: block;
margin: 0 auto;
background-color: #fff;
z-index: 1000;
display: none;
border-radius: 0.5rem;
transition: 2s;
-moz-transition: 2s; /* Firefox 4 */
-webkit-transition: 2s; /* Safari and Chrome */
-o-transition: 2s; /* Opera */
}
js
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
因为
display是状态属性,也就是说,它的改变会导致从一个状态直接跳到另外一个状态,所以不存在渐变动画。如果需要隐藏,建议使用opacity来做。opacity是控制透明度的属性,当透明度为0时,元素就不可见了。另外,提醒一下,你的
#box样式里写了两次display属性。你如果要用transition不妨不用display:none换成height:0或者width:0,从高度或宽度上来隐藏
你想要的是关闭聊天对话框的窗口动画效果?合并关闭或者右侧淡出,用框架吧,容易实现