时间戳

首页 > 解决方案 > 一张图片包含 4 张图片的 Css 动画

css - 一张图片包含 4 张图片的 Css 动画

问题描述

大家好，我是 Web 开发的新手，我今天想学习一些东西。这是我想用 css 制作动画的图像。 https://i.stack.imgur.com/CRUPb.png

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title></title>
  </head>
  <body>
    <img src="picture.png">
  </body>
</html>

这是我的 html 代码，我想让图片在 2 秒内改变位置（从女孩到婴儿等）。这就是我到目前为止用css所做的:(

img {
    animation-name: slide-show;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes slide-show {
  0% {opacity: 0;,};
  100% {opacity: 1;};

}

标签： cssanimation

解决方案

推荐阅读