css载入特效代码

CSS载入特效代码基础概念

CSS载入特效通常指的是使用CSS动画或过渡效果来增强网页的视觉体验。这些特效可以在页面加载时显示，或者在用户与页面交互时触发。CSS动画和过渡是CSS3的一部分，提供了丰富的视觉效果，而不需要额外的JavaScript代码。

类型

CSS过渡（Transitions）：用于在两个状态之间平滑过渡。例如，一个按钮在被点击时颜色变化。
CSS动画（Animations）：用于创建更复杂的动画效果。例如，一个旋转的加载图标。

应用场景

页面加载动画：在页面加载时显示一个加载动画，提升用户体验。
交互反馈：当用户与页面元素交互时，显示动画反馈，如按钮点击效果。
导航效果：在导航菜单中添加动画效果，增强视觉吸引力。

示例代码

以下是一个简单的CSS过渡示例，展示按钮点击时的颜色变化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transition Example</title>
    <style>
        .button {
            padding: 10px 20px;
            background-color: blue;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.5s ease;
        }

        .button:hover {
            background-color: red;
        }
    </style>
</head>
<body>
    <button class="button">Click Me</button>
</body>
</html>