css渐入

CSS渐入（CSS Fade In）是一种网页设计效果，通过CSS动画实现元素从透明到不透明的过渡，通常用于页面加载时的元素显示，或者用于增强用户体验的动画效果。

基础概念

CSS渐入效果主要通过CSS的opacity属性和transition或animation属性来实现。opacity属性用于设置元素的透明度，取值范围从0（完全透明）到1（完全不透明）。transition属性用于定义元素属性变化时的过渡效果，而animation属性则用于创建更复杂的动画。

类型

CSS渐入效果主要有以下几种类型：

简单渐入：元素从透明逐渐变为不透明。
带延迟的渐入：元素在一定延迟后开始渐入。
带缓动的渐入：元素渐入的速度不是恒定的，而是根据缓动函数变化。

应用场景

页面加载：页面中的元素在加载时逐渐显示。
模态框：当模态框打开时，背景和内容逐渐显示。
图片或视频：图片或视频在页面上逐渐显现。
导航菜单：导航菜单项在鼠标悬停时逐渐显示。

示例代码

以下是一个简单的CSS渐入效果的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Fade In Example</title>
    <style>
        .fade-in {
            opacity: 0;
            transition: opacity 1s ease-in;
        }
        .fade-in.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="fade-in">Hello, World!</div>
    <script>
        window.onload = function() {
            document.querySelector('.fade-in').classList.add('active');
        };
    </script>
</body>
</html>

在这个示例中，div元素初始时是完全透明的（opacity: 0），当页面加载完成后，通过JavaScript添加active类，触发CSS过渡效果，使元素在1秒内逐渐变为不透明（opacity: 1）。