html - 如何在 HTML5 文本的 Div 中添加淡出效果

Question

我有文本 div 我希望在页面加载或加载 div 时对此有淡出效果 我有以下 html 代码我想在其上执行

<div class="text_paragraph">
    <p>Bovine Respiratory Disease (BRD) is the leading cause of economic 
       loss in the beef industry. <small>1, 2</small></p>
</div>

Answer 1

你可以用 CSS3 做到这一点。像这样写：

.text_paragraph >p{
    -webkit-animation: fadi 5s 1;
}
@-webkit-keyframes fadi {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes fadi {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

检查这个http://jsfiddle.net/TPsb7/2/

Answer 2

淡出元素通常不是用纯 HTML 完成的。您可以使用 CSS 来完成，但总的来说，它是在jQuery之类的库的帮助下完成的，它允许您以最少的代码执行复杂的动画和效果。

$(document).ready(function(){
  $(".text_paragraph").fadeOut();
});

div文档加载完成后，上面的代码就会淡出你的。