使用CSS3写一个图片左右切换的弹性动画

要使用CSS3创建一个图片左右切换的弹性动画，你可以使用@keyframes来定义动画，并利用animation属性将其应用到元素上。以下是一个简单的示例，展示了如何实现这样的动画效果：

  1. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片左右切换弹性动画</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img src="path_to_your_image.jpg" alt="Sample Image" class="animated-image">
    </div>
</body>
</html>
  1. CSS (styles.css):
.image-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.animated-image {
    width: 100%;
    height: auto;
    position: absolute;
    animation: bounce-left-right 2s infinite;
}

@keyframes bounce-left-right {
    0%, 100% {
        transform: translateX(0);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateX(-30px);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

在这个示例中，.image-container用于设置图片容器的尺寸和溢出隐藏。.animated-image类应用于你想要动画的图片，并指定了动画名称、持续时间等。@keyframes规则定义了动画的关键帧，实现了图片在容器内左右弹跳的弹性效果。

你可以根据需要调整动画的持续时间、弹跳距离等参数来达到你想要的效果。同时，请确保将path_to_your_image.jpg替换为你实际图片的路径。

posted @ 2024-12-22 06:23  王铁柱6  阅读(155)  评论(0)    收藏  举报