css

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

小亿
379
2023-08-08 09:30:31
栏目: 编程语言

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

下面是一个简单的示例:

<!DOCTYPE html>

<html>

<head>

<style>

.fade-in-out {

  animation: fade-in-out 2s infinite;

}

@keyframes fade-in-out {

  0% { opacity: 0; }

  50% { opacity: 1; }

  100% { opacity: 0; }

}

</style>

</head>

<body>

<div class="fade-in-out">这是一个淡入淡出的文本。</div>

</body>

</html>

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

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


0
看了该问题的人还看了