Q&A
画像がトップからボトムまで下がっていくアニメーションを作りました。
ウインドウサイズからはみ出ると表示されないよう親要素にoverflow: hidden
を付けましたが、思うようにいかずスクロールバーが表示されてしまいます。
どうすればスクロールバーが表示されなくなるでしょうか？
よろしくお願いします。
html
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <link rel="stylesheet" href="style.css" /> 8 <title>Document</title> 9 </head> 10 <body> 11 <div class="cherry-blossom-container"> 12 <div class="box"></div> 13 </div> 14 </body> 15</html>
css
1* { 2 box-sizing: border-box; 3 margin: 0; 4 padding: 0; 5} 6 7.cherry-blossom-container { 8 width: 100%; 9 height: 100vh; 10 overflow: hidden; 11} 12.box { 13 position: absolute; 14 width: 100px; 15 height: 100px; 16 background-color: lightblue; 17 animation-name: animate-petal; 18 animation-duration: 10s; 19 animation-timing-function: linear; 20} 21 22@keyframes animate-petal { 23 0% { 24 top: 0; 25 } 26 100% { 27 top: 100vh; 28 } 29} 30
自己解決
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。