极客观点
项目管理
HarmonyOS
我正在建立一个小型网站，并希望在有人访问该网站时让文本（以及添加图像时的图像） 淡入？
谢谢！
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-color: lightgrey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<style>
p.one {
border: 1px lightgrey;
background-color: lightgrey;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 0px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">Our Routes</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<img class="displayed" src="E:\Users\PC\Documents\Image" alt="...">
<h1 align="center"> HOME </h1>
<p class="one" , align="center"> Text Goes here
</p>
</body>
</html>
原文由 snazzyconnor 发布，翻译遵循 CC BY-SA 4.0 许可协议
http://codepen.io/JTBennett/pen/GorVRL [您的站点带有淡入淡出和运动] http://codepen.io/JTBennett/pen/BjpXRo [以下说明的示例]
这是一个例子。如果您希望它同时淡入，HTML 需要一个 div 包裹整个正文内容。寻找这个：
你可以用 CSS 做很多事情，我已经使用它很多年了，我仍然时不时地学到一些新东西。
所有的动画命令都会像这样出现在你的 CSS 中：
然后你的 div 将有一个调用动画的类（@keyframes）：
HTML 将如下所示：
最后，您需要确保包含供应商代码以使其与所有浏览器兼容[这会添加相当多的代码，这就是为什么 jQuery 可以成为这些东西的更好选择的原因]：
必须在 CSS 的 div 类中再次复制供应商代码：
使用 jQuery 可以更快地实现效果，正如您在此处的其他答案之一中看到的那样。
在你学会手工制作之后，如果你想节省一点时间，我建议你使用这个 CSS3 动画生成器：http: //cssanimate.com/
不过，请确保您首先了解它。
最后，这是一个执行类似功能的 jQuery 示例（虽然这次使用 SVG 而不是 div，但过程相同）： http ://codepen.io/JTBennett/pen/YwpBaQ