css让图片动起来

CSS让图片动起来

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以控制网页中元素的布局、颜色、字体等样式。CSS动画则是通过CSS3提供的@keyframes规则来创建动画效果。

类型

关键帧动画（Keyframe Animation）：使用@keyframes规则定义动画的关键帧。
过渡动画（Transition）：通过设置元素的transition属性，实现简单的动画效果。

应用场景

页面加载动画：在页面加载时显示一些动态效果，提升用户体验。
交互动画：用户与页面元素交互时触发的动画效果，如按钮点击、鼠标悬停等。
滚动动画：当用户滚动页面时触发的动画效果，如视差滚动、滚动动画等。

示例代码

以下是一个使用CSS关键帧动画让图片动起来的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Image Animation</title>
    <style>
        .animated-image {
            width: 200px;
            height: 200px;
            animation: moveImage 2s infinite;
        }

        @keyframes moveImage {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(100px);
            }
            100% {
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <img src="path/to/your/image.jpg" alt="Animated Image" class="animated-image">
</body>
</html>