文章/答案/技术大牛

发布

社区首页 >问答首页 >将宽度100%设置为动画中的图像

问将宽度100%设置为动画中的图像
EN

Stack Overflow用户

提问于 2022-09-06 22:17:46

回答 1查看 28关注 0票数 0

我试图创建一个图像交换仅使用css，我能够轻松地使图像交换的动画功能。但是，由于图像本身并不是完美的大小，并且使用带有更改背景的动画的div，并调整div的大小以适应整个屏幕：

width: 100%;
height: auto;

对于图像，不能像通常用css完成的那样安装在屏幕上，如果它是用html img标记完成的，因此它会创建图像的各种副本来填充缺少的空间。

如何使动画将图像的宽度设置为100%？

.animation {
    animation: imgswaper 10s infinite alternate;
    width: 100%;
    height: 300px;
}

@keyframes imgswaper {
    0% {
        background-image: url(https://www.collinsdictionary.com/images/full/apple_158989157.jpg);
    }
    1% {
        background-image: url(https://www.collinsdictionary.com/images/full/apple_158989157.jpg);
    }
    50% {
        background-image: url(https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?202207110316);
    }
    51%{
        background-image: url(https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?202207110316);
    }
    100% {
        background-image: url(https://www.collinsdictionary.com/images/full/apple_158989157.jpg);
    }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="animation"></div>
  </body>
</html>

html

css

css-animations

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-07 00:16:17

添加背景大小和背景-重复到您的css。背景-图像只是离散的动画，尽管如此，它将看起来很简陋。

更多信息这里

.animation {
  animation: imgswaper 10s infinite alternate;
  width: 100%;
  height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
}

@keyframes imgswaper {
  0% {
    background-image: url(https://www.collinsdictionary.com/images/full/apple_158989157.jpg);
  }
  1% {
    background-image: url(https://www.collinsdictionary.com/images/full/apple_158989157.jpg);
  }
  50% {
    background-image: url(https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?202207110316);
  }
  51% {
    background-image: url(https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?202207110316);
  }
  100% {
    background-image: url(https://www.collinsdictionary.com/images/full/apple_158989157.jpg);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <div class="animation"></div>
</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73628283

复制

相似问题

问将宽度100%设置为动画中的图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将宽度100%设置为动画中的图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将宽度100%设置为动画中的图像
EN