Transition：before（background-color）

当我的网站中某个元素处于活动状态时，我正在将一个类应用到body中。我想很淡出剩下的内容，如一个模式，但我想在我还没有与迄今成功的背景叠加褪色。Transition：before（background-color）

.booking-open{ 
 
    transition:background-color 2s ease; 
 
} 
 

 
.booking-open:before{ 
 
    position:fixed; 
 
    left:0;right:0;top:0;bottom:0; 
 
    content:""; 
 
    z-index: 1; 
 
    background-color:rgba(0,0,0,.5); 
 

 
}

<body class="booking-open"> 
 
Demo 
 
</body>

我已经试过几乎所有的场景，但到目前为止还没有合适的人。我究竟做错了什么？

来源

2017-03-09 Morten Hjort

您可以使用CSS3动画这样的：

@keyframes example { 
    from {background-color: inherit;} 
    to {background-color: rgba(0,0,0,.5);} 
} 

.booking-open:before{ 
    position:fixed; 
    left:0;right:0;top:0;bottom:0; 
    content:""; 
    z-index: 1; 
    background-color:rgba(0,0,0,.5); 
    animation-name: example; 
    animation-duration: 4s; 
}

例子：https://fiddle.jshell.net/193w5pyz/1/

来源

2017-03-09 13:19:38 adys

Transition：before（background-color）

回答

相关问题