CSS3动画淡出一个图像和淡出另一个图像

目前我有一个div内的表，表有2行，顶部行有3列，底部行有2列。我使用表格的原因是因为我不知道如何在这种安排中设置div。

我需要做的是使用CSS3动画，如果可能的话，使每个单元格内的图像在悬停时淡出一个新的图像，但也要保持喜欢它。我已经得到了这到目前为止的ok，但是我希望图像更改回原始图像，如果用户悬停在表格上的单元格内的另一个图像。

谁能告诉我怎么做这件事?我的代码也在下面。

<div id="table">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td bgcolor="#b15ce2"><img src="transparentimage1.jpg" width="390" height="390" /></td>
  <td bgcolor="#70f940"><img src="transparentimage2.jpg" width="390" height="390" />&nbsp;</td>
  <td bgcolor="#4040f9"><img src="transparentimage3.jpg" width="390" height="390" />&nbsp;</td>
</tr>
<tr>
  <td bgcolor="#9933CC"><img src="transparentimage4.jpg" width="390" height="390" />&nbsp;</td>
  <td bgcolor="#33FF99" colspan="2"><img src="transparentimage5.jpg" width="390" height="390" />      </td>
</tr>

css
:
#table { position: absolute; width: 90%; height: 700px; left: 5%; background-color: #FFFFFF; border-radius: 20px; border: 8px solid #666666; }

下面是一个简单的基本示例!
步骤1

为图片添加类，指定哪些图片应该立即显示，哪些应该在悬停时显示。我将使用"img1"one_answers"img2" - img1最初是可见的。
HTML:
<div class="hover-img"> <img src="kjdflkjsdf.jpg" class="img1"/> <img src="lkgflsjgkl.jpg" class="img2"/> </div>
<标题> 第2步
样式的图像是绝对的-这允许他们躺在彼此的顶部，这是我们想要的，因为我们希望他们都出现在同一个位置。为了使绝对元素正确呈现，它们的父元素必须具有relative, absolute或fixed定位。我们选relative。
CSS:
.hover-img { position: relative; width: 500px; height: 500px; } .hover-img > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Assuming that both images have the same dimensions - in thise case, 500x500 */ }
<标题>步骤3
设置第二个图像的样式，使其通常是完全透明的(不透明度:0)，当鼠标悬停时变为完全不透明:
CSS:
.hover-img > .img2 { opacity: 0; } .hover-img:hover > .img2 { opacity: 1; }
<标题> 步骤4
使不透明度属性过渡而不是立即改变:
CSS:
.hover-img > .img2 { opacity: 0; /* This comes from step 3 */ -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; }
你就知道了!
(工作小提琴:http://jsfiddle.net/4p6Lk/)

你不应该使用表格，它们已经过时了。查看使用float和使用'inline-block'显示div。

可以使用CSS从一个图像渐变到另一个图像

创建一个具有唯一类/id的div:

<div class="image"></div>

以CSS中的div为目标，并添加一个背景图像(您需要为这个样式添加定位和大小，我在这个示例中跳过了这个)。对于渐暗效果，你需要添加过渡属性，并设置过渡样式(即缓出，线性等)和时间(0.5s = 0.5秒)。
.image{background: url(../img/photo.jpg); -webkit-transition: ease-out 0.5s; transition: ease-out 0.5s;}

然后在悬停
时为div添加不同的背景图像
.image:hover{background: url(../img/hoverphoto.jpg)}

这是一个简单的解决方案，对于更深入的动画，请查看CSS关键帧动画和jQuery悬停动画

很像Alan Sutherland的风格，但是有一个浏览器特定的转换声明的完整列表…

#table td { background: url('/path/to/some/image.png'); transition: 0.25s; -o-transition: 0.25s; -ms-transition: 0.25s; -moz-transition: 0.25s; -webkit-transition: 0.25s; } #table td:hover { background: url('/path/to/some/different-image.png'); }
这将影响元素中id为table的每个表单元格。你真正需要做的就是为任何你想要的单元格设置一个bg图像，然后使用:hover pseudo -class来设置一个新的bg图像。

http://www.css3.info/preview/css3-transitions/，特别是http://davidwalsh.name/background-animation-css(用于背景)可能会对您有所帮助。

相关内容

最新更新

热门标签：