如何使這個CSS動畫響應？

我使用CSS3動畫創建了一個簡單的網站。有什麼辦法可以讓它響應嗎？如何使這個CSS動畫響應？

鏈接：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>

來源

2016-05-16 Sai

一般而言，您應該發佈實際的html和css，而不是隨時可能更改並變得不相關的鏈接。 –

你到目前爲止嘗試過什麼？你遇到了什麼問題？請分享一個[MCVE]。 – Shaggy

@Shaggy我試過應用bootstrap「img-responsive」類來使圖像響應，但找不到一種方法來使動畫響應。 – Sai

你需要給它一個最大寬度，以確保它不會被切斷。

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

來源

2016-05-16 15:16:52

試過了。它不工作.. – Sai

如何使這個CSS動畫響應？

回答

相關問題