CSS3背景图像过渡

我正在尝试使用CSS过渡制作"渐入渐出"效果。但是我不能让这个工作与背景图像…

CSS:

.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: transparent;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.title a:hover {
background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}

看一下:http://jsfiddle.net/AK3La/

可以转换background-image。在img元素上使用下面的CSS:

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

Chrome, Opera和Safari都支持。Firefox还没有实现它(bugzil.la)。不确定IE。

解决方案(我自己发现的)是一个忍者技巧，我可以为您提供两种方法:

首先你需要为<img>创建一个"容器"，它将同时包含正常和悬停状态:

<div class="images-container">
<img src="http://lorempixel.com/400/200/animals/9/">
<img src="http://lorempixel.com/400/200/animals/10/">
</div>

与CSS3选择器http://jsfiddle.net/eD2zL/1/(如果您使用这个，"正常"状态将是您的容器的第一个子，或更改nth-child()顺序)
CSS2解决方案http://jsfiddle.net/eD2zL/2/(只是几个选择器之间的差异)

基本上，你需要隐藏"正常"状态，并显示他们的"悬停"当你悬停

就这些，我希望有人会觉得有用。

不幸的是你不能在background-image上使用过渡，请参阅w3c的动画属性列表

你可能想对background-position做一些技巧。

我找到了一个适合我的解决方案…

如果你有一个只包含链接的列表项(或div)，假设这是你的页面上到facebook, twitter等的社交链接。如果你使用的是Sprite图像，你可以这样做:

<li id="facebook"><a href="facebook.com"></a></li>

让"li"的背景作为按钮图像

#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}

然后将链接的背景图像设置为按钮的悬停状态。同时添加透明度属性，并将其设置为0。

#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
}

现在你所需要的是在a:hover下面设置不透明度，并将其设置为1。

#facebook a:hover {
opacity:1;
}

将每个浏览器的不透明度过渡属性添加到"a"one_answers"a:hover"，这样最终的css将看起来像这样:

#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
#facebook a:hover {
opacity:1;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}

如果我解释正确，应该让你有一个褪色的背景图像按钮，希望它至少有帮助!

你可以使用伪元素来获得你想要的效果，就像我在小提琴中所做的那样。

CSS:

.title a {
display: block;
width: 340px;
height: 338px;
color: black;
position: relative;
}
.title a:after {
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
content: "";
opacity: 0;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
/* TRANSISITION */
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{   
opacity: 1;
}

HTML:

<div class="title">
<a href="#">HYPERLINK</a>
</div>

考虑到背景图像不能动画，我创建了一个小的SCSS mixin，允许在之前使用伪选择器在两个不同的背景图像之间进行过渡。后和．它们在不同的z指数层。前面的一个以不透明度0开始，并在悬停时变为可见。

你也可以用同样的方法来创建线性渐变动画。

<标题>scss h1> 在你可以简单地用

@include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");

你可以在这里查看:https://jsfiddle.net/pablosgpacheco/01rmg0qL/

如果你会使用jQuery，你可以尝试BgSwitcher插件来切换背景图像与效果，它很容易使用。

例如:

$('.bgSwitch').bgswitcher({
images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
effect: "fade",
interval: 10000
});

并添加自己的效果，参见添加效果类型

试试这个，将使背景动画在web上工作，但混合移动应用程序不工作

@-webkit-keyframes breath {
0%   {  background-size: 110% auto; }
50%  {  background-size: 140% auto; }
100% {  background-size: 110% auto; }      
}
body {
-webkit-animation: breath 15s linear infinite;
background-image: url(images/login.png);
background-size: cover;
}

如果不能将opacity动画化，也可以将background-size动画化

例如，我用这个CSS设置了一个延迟的backgound-image。

.before {
background-size: 0;
}
.after {
transition: background 0.1s step-end;
background-image: $path-to-image;
background-size: 20px 20px;
}

Salam，这个答案只适用于Chrome，因为IE和FF支持颜色过渡。

没有必要让你的HTML元素opacity:0，因为有时他们包含文本，没有必要加倍你的元素!

问题链接到一个例子在jsfiddle需要一个小的改变，那就是把一个空的图像在.title a像background:url(link to an empty image);一样，你把它放在.title a:hover，但使它空的图像，代码将工作。

.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}
.title a:hover{   background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}

看看这个https://jsfiddle.net/Tobasi/vv8q9hum/

与Chris的鼓舞人心的帖子在这里:

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

我设法想出了这个:

#banner
{
display:block;
width:100%;
background-repeat:no-repeat;
background-position:center bottom;
background-image:url(../images/image1.jpg);
/* HOVER OFF */
@include transition(background-image 0.5s ease-in-out); 
&:hover
{
background-image:url(../images/image2.jpg);
/* HOVER ON */
@include transition(background-image 0.5s ease-in-out); 
}
}

这可以通过使用伪元素获得比可接受的答案更好的跨浏览器支持来实现，如以下答案所示:https://stackoverflow.com/a/19818268/2602816

我为此挣扎了一会儿，我首先使用了一堆图像，每隔三秒钟，我试图动画到堆栈中的下一个图像，并将当前图像扔到堆栈的底部。同时，我使用了如上所示的动画。我这辈子都没办法让它起作用。

你可以使用这个库，它允许使用jquery-backstretch动态调整大小，具有幻灯片功能的背景图像。

https://github.com/jquery-backstretch/jquery-backstretch

相关内容

最新更新

热门标签：