[英]CSS animate transition of background image getting darker
So I'm building a page that has a background image: 所以我正在构建一个具有背景图像的页面:
body {
background:url(images/bg.png) center center no-repeat fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover
}
The page loads with a div that looks like a alert/message. 页面加载一个看起来像警报/消息的div。 When this div loads I want a short animation of the background-image getting darker,
当这个div加载时,我想要一个背景图像变暗的短动画,
Right now I use this: 现在我用这个:
back {
background:rgba(0,0,0,.95);
display:block;
height:100%;
left:0;
opacity:1;
position:fixed;
top:0;
width:100%
}
This makes it darker, but I want this to happen gradually in a smooth transition/animation. 这使它更暗,但我希望这在平滑过渡/动画中逐渐发生。
You can use @keyframes for this. 您可以使用@keyframes 。 I don't know what your HTML looks like, but here's a little demo:
我不知道你的HTML是什么样子,但这里有一个小小的演示:
.back { background:rgba(0,0,0,.95); display:block; height:500px; left:0; opacity:1; position:fixed; top:0; width:500px; } @keyframes back-change { from { background: rgba(133,133,133,.95) } to { background: rgba(0,0,0,.95) } } .back { animation: back-change 4s linear; }
<div class="back"></div>
I set it to change from light to dark over 4s in a linear pattern. 我将它设置为以线性模式在4s内从亮到暗变化。 You can change the duration or change the pattern to whatever you want (none, infinite, etc.).
您可以更改持续时间或将模式更改为您想要的任何内容(无,无限等)。
Notice that the name back-change
that follows the @keyframes
word is what you'll have to call in the the animation
property later on. 请注意,
@keyframes
back-change
的名称back-change
是您稍后必须在animation
属性中调用的内容。 If you change the name in one spot, you'll have to change it in both. 如果您在一个位置更改名称,则必须在两者中更改它。
Here's a JSFiddle Example as well for messing around with on your own. 这是一个JSFiddle示例 ,也可以自己搞乱。
You can also use CSS3 Transitions as well. 您也可以使用CSS3 Transitions 。 These have been supported a little longer in web browsers.
这些在Web浏览器中得到了更长时间的支持。
.back { background:rgba(0,0,0,.95); display:block; height:500px; left:0; opacity:1; position:fixed; top:0; width:500px; transition-property: background-color; transition-duration: 0.3s; } .back:hover { background-color: rgba(133,133,133,.95); }
<div class="back"></div>
Again, here's a JSFiddle Example for you to play with. 再次,这是一个JSFiddle示例供您玩。
This is a job for a transition, not an animation: 这是转换的工作,而不是动画:
In this example I'll change the opacity to fade out when you hover over it... 在这个例子中,当你将鼠标悬停在它上面时,我会将不透明度改为淡出...
.TransitStyle {
background:rgba(0,0,0,.95);
display:block;
height:100%;
left:0;
opacity:1;
position:fixed;
top:0;
width:100%
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.TransitStyle:hover {
opacity: 0.0;
}
You can use simple css transition and jQuery addClass()
method only to set element class attribute. 您可以使用简单的css transition和jQuery
addClass()
方法来设置元素类属性。
JS JS
$( window ).load( function() {
$( '.overlay' ).addClass( 'dark' );
});
CSS CSS
.overlay {
background-color: rgba(0,0,0,0);
transition: background-color 1s ease;
}
.dark{
background-color: rgba(0,0,0,.95);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.