我正在嘗試在首次加載時為我的主頁創建動畫。我想要我必須從頁面底部升起的球，但是一旦它到達中間，用戶就可以單擊它并擴展到整個頁面。我有這里的升球代碼：*, *::after, *::before {box-sizing: inherit;}html{ box-sizing: border-box;}body{ margin: 0; padding: 0; overflow: hidden;}.ball{ background-color: #eb8c28; width: 100px; height: 100px; border-radius: 0%; position: absolute; bottom: 0%; left: 50%; animation: rise; animation-duration: 2s; animation-iteration-count: 1; animation-fill-mode: forwards;}@keyframes rise{ 0%{ border-radius: 50%; } 100%{ border-radius: 50%; transform:translateY(-100%); } 75%{ border-radius: 40%; } 80%{ border-radius: 30%; } 90%{ border-radius:20%; } 100%{ transform: scale(20,20); }}<!DOCTYPE html><html> <head> <link rel="stylesheet" type="text/css" href="ballcopy.css"> <meta name="veiwport" content="width=device-width, initial-scale=1.0"> </head> <body> <main> <div class="ball"></div> </main> </body></html>但是，我堅持要如何將球縮放到整個頁面。我應該創建另一個 div 并使其可點擊，還是有辦法創建一個可點擊一半的動畫以使用 JS 完成動畫。
起始頁動畫
元芳怎么了
2022-12-22 15:58:22
