css怎么实现淡入淡出动画效果

lewis 7年前 (2019-01-29) 阅读数 12 #程序编程

文章标签 css

要实现淡入淡出动画效果，您可以使用CSS的@keyframes规则和opacity属性来控制元素的透明度。

下面是一个简单的示例：

<!DOCTYPEhtml><html>
<head>
<style>
.fade-in-out{
animation:fade-in-out2sinfinite;
}
@keyframesfade-in-out{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
</style>
</head>
<body>
<divclass="fade-in-out">这是一个淡入淡出的文本。</div>
</body>
</html>

在上面的示例中，我们定义了一个名为fade-in-out的类，并将其应用于一个<div>元素。通过animation属性，我们将fade-in-out动画应用于元素。@keyframes规则定义了动画的关键帧，在0%时元素的透明度为0，在50%时透明度为1，在100%时透明度再次变为0。最后，我们将动画设置为循环播放（infinite），并指定动画持续时间为2秒。

您可以根据需要自定义动画效果，调整关键帧的百分比和元素的样式属性，以实现不同的淡入淡出效果。