次のような感じで四角形を次々と登場させていくということをやっているのですが、自動的に改行された際、ブロックとブロックの間に微妙な隙間が生まれます。
これを消したい場合はどうするべきでしょうか?
html
1<div id="square0" class="square" style="background: rgb(244, 179, 194); opacity: 0; animation-delay: 0ms;"></div> 2<div id="square1" class="square" style="background: rgb(212, 172, 173); opacity: 0; animation-delay: 100ms;"></div> 3<div id="square2" class="square" style="background: rgb(225, 169, 171); opacity: 0; animation-delay: 200ms;"></div> 4<div id="square3" class="square" style="background: rgb(246, 191, 188); opacity: 0; animation-delay: 300ms;"></div> 5<div id="square4" class="square" style="background: rgb(245, 177, 170); opacity: 0; animation-delay: 400ms;"></div> 6<div id="square5" class="square" style="background: rgb(228, 171, 155); opacity: 0; animation-delay: 500ms;"></div> 7<div id="square6" class="square" style="background: rgb(240, 145, 153); opacity: 0; animation-delay: 600ms;"></div> 8<div id="square7" class="square" style="background: rgb(242, 160, 161); opacity: 0; animation-delay: 700ms;"></div> 9<div id="square8" class="square" style="background: rgb(240, 144, 141); opacity: 0; animation-delay: 800ms;"></div> 10・ 11・ 12・ 13
CSSアニメーション
css
1 2body{ 3 margin:0; 4 padding: 0; 5} 6@keyframes arrival { 7 100%{ 8 opacity: 1; 9 transform: rotateY(360deg); 10 } 11} 12#div{ 13 line-height:0; 14} 15.square { 16 display:inline-block; 17 width: 100px; 18 height:100px; 19 animation: forwards; 20 animation-name: arrival; 21 animation-duration: 300ms; 22}
javascript
1num=100 2delay=100 3colors=['F4B3C2', 'D4ACAD', 'E1A9AB', 'F6BFBC', ・・・・] 4div=document.createElement("div") 5div.id="loading1" 6document.body.appendChild(div) 7 8for (i=0;i<num;i++){ 9 square=document.createElement("div") 10 square.id="square"+i 11 square.classList.add("square") 12 13 square.style.background="#"+colors[i] 14 square.style.opacity="0" 15 square.style.animationDelay=i*delay+"ms" 16 17 div.appendChild(square) 18} 19

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。