css3 - 动画功能 — Animations功能实现网页的淡入淡出

最新推荐文章于 2025-11-14 00:47:40 发布

原创最新推荐文章于 2025-11-14 00:47:40 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何使用CSS3的Animations功能来创建网页淡入淡出的效果。通过修改元素的opacity属性，在开始和结束帧之间平滑过渡，实现了网页内容逐渐显现和消失的视觉效果。

在线展示

打开页面，网页会慢慢淡入；

html：

<body>
  示例文字示例文字示例文字示例文字示例文字
</body>

css：

<style>
      @-webkit-keyframes fadein {
        0% {
            opacity: 0;
            background-color: #fff;
        }
        100% {
            opacity: 1;
            background-color:  #fff;
        }
      }

      body {
        -webkit-animation-name: fadein;
        -webkit-animation-duration: 4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1; /* 动画只播放一次 */
      }
</style>