Question

我有一个网站，我想添加一些CSS动画。目前我有简单的翻转图像作为导航栏按钮。我想添加褪色效果，就像现在一样，但更漂亮，你现在我的意思是，过渡。是网站和导航栏，所以我想有相同的导航栏但具有淡化过渡效果。我已经尝试了很多东西，但没有什么对我有用，得到淡入淡出，但它没有改变到另一个图像。谢谢你的帮助！

HTML：

<div id="buttons"><a href="../index.html" onmouseout="MM_swapImgRestore()"                  onmouseover="MM_swapImage('Home','','../gallery/images/buttons2_01.png',1)"><img      src="../gallery/images/buttons_01.png" width="100" height="42" id="Home" /></a><a    href="../Resume.html" onmouseout="MM_swapImgRestore()"  onmouseover="MM_swapImage('Resume','','../gallery/images/buttons2_02.png',1)"><img src="../gallery/images/buttons_02.png" width="110" height="42" id="Resume" /></a><a href="../Portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Portfolio','','../gallery/images/buttons2_03.png',1)"><img src="../gallery/images/buttons_03.png" width="108" height="42" id="Portfolio" /></a><a href="../Contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../gallery/images/buttons2_04.png',1)"><img src="../gallery/images/buttons_04.png" width="110" height="42" id="Contact" /></a></div>

CSS：

#buttons {
 width:428px;
 height:42px;
 margin-top:48px;
 float:right;
 margin-right:35px;}

Answer 1

例如，尝试使用不透明度！

#buttons {
 width:428px;
 height:42px;
 margin-top:48px;
 float:right;
 margin-right:35px;
 opacity:1;         /*Here the full opacity*/
 transition: opacity 1s;

#buttons:hover {     /*Hover means when you go over the element with the mouse*/
  opacity: 0.6;}

如果您不喜欢这样，请告诉我，我会向您展示其他内容！最好，

将按钮图像淡入另一个按钮图像

1 个答案: