如何使用 CSS 淡入新的 HTML 元素 [重复]

Posted 2023-03-06

【中文标题】如何使用 CSS 淡入新的 HTML 元素 [重复]

【英文标题】：How can I fade in new HTML elements with CSS [duplicate]

【发布时间】：2014-05-28 08:03:01

【问题描述】：

如何让所有新的 html 元素淡入淡出，只使用 CSS 而不使用任何 javascript？

【问题讨论】：

你有没有尝试过？

【参考方案1】：

您可以使用 CSS 过渡

这里是一些示例代码：

<style>
.swapMe img  -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;  .swap1, .swapMe:hover .swap2  -webkit-opacity: 1; -moz-opacity: 1; opacity: 1;  .swapMe:hover .swap1, .swap2  -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; 
</style>

<div class="swapMe">
  <img src="http://0.tqn.com/d/webdesign/1/0/D/m/1/jaryth1.jpg" class="swap1" style="position: absolute;">
  <img src="http://0.tqn.com/d/webdesign/1/0/E/m/1/jaryth2.jpg" class="swap2">
</div>