如何使这个 css 动画响应？

Posted 2023-03-06

【中文标题】如何使这个 css 动画响应？

【英文标题】：How to make a this css animation responsive?

【发布时间】：2016-09-12 09:32:47

【问题描述】：

我使用 CSS3 动画创建了一个简单的网站。有没有办法让它响应？

链接：http://dollarz.comli.com/

编辑： 我试过引导程序使图像响应，但无法使动画响应。

body 
  height: 100%;
  background: radial-gradient(#009acc, #363795);
  background-color: #221e05;
  color: white;
  font-family: 'Georgia', 'trajan pro', 'serif';

header 
  width: 570px;
  margin: 0 auto;
  perspective: 500px;

h1 
  text-align: center;
  margin-top: 40px;
  font-size: 52px;
  line-height: 24px;

h3 
  text-align: right;
  font-family: 'Dancing Script', 'brush script std', 'sans-serif';
  font-size: 26px;
  padding-right: 15px;
  line-height: 10px;
  color: #f2af1a;

p 
  text-align: center;
  font-size: 14px;

.puzzle 
  width: 800px;
  height: 457px;
  margin: 50px auto 0;
  background-image: url('http://dollarz.comli.com/Maze%20Puzzle.gif');
  position: relative;

.ball 
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #f2af1a;
  border-radius: 100%;
  top: 150px;
  left: 45px;
  animation: movement 20s ease 3s infinite;

@keyframes movement 
    0%  top: 200px; left:  45px; 
    5%  top: 273px; left:  45px; 
   10%  top: 273px; left: 136px; 
   20%  top: 162px; left: 136px; 
   30%  top: 162px; left: 360px; 
   40%  top: 105px; left: 360px; 
   50%  top: 105px; left: 417px; 
   60%  top: 332px; left: 417px; 
   70%  top: 332px; left: 473px; 
   75%  top: 220px; left: 473px; 
   80%  top: 220px; left: 587px; 
   85%  top: 110px; left: 587px; 
   90%  top: 110px; left: 645px; 
   95%  top: 257px; left: 645px; 
  100%  top: 257px; left: 732px; 

<header>
  <h1>Solving Maze Puzzle</h1>
  <h3>..Using CSS Animation</h3>
</header>

<div class="puzzle">
  <div class="ball"></div>
</div>

【问题讨论】：

一般来说，您应该发布您的实际 html 和 css，而不是可能随时更改并变得无关紧要的链接。

到目前为止您尝试过什么？你遇到过什么问题？请分享minimal reproducible example。

@Shaggy 我尝试应用引导程序“img-responsive”类来使图像响应，但找不到使动画响应的方法。

@RachelS 添加了 html 和 css 代码。

【参考方案1】：

你需要给它一个最大宽度以确保它不会被切断。

.puzzle 
        width: 800px;
        height: 457px;
        margin: 50px auto 0;
        background-image: url('Maze Puzzle.gif');
        position: relative;
        max-width: 100%;
        display: block;