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）

回答

相關問題