今天做了好多小東西，還挺開心的~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正在加載中...</title> <style type="text/css"> .box{ width:300px; height:125px; border:1px solid #000; margin:200px auto 0; } .box p{ text-align: center; width:100%; float:left; /*p標簽默認有樣式*/ margin:0; padding:0; } .box div{ width:30px; height:70px; margin:15px; float: left; background-color: hotpink; border-radius:10px; } .box div:nth-child(1){ background-color: lightcoral; /*縮、放 這是兩次，所以是2*/ /*animation:loading 0.5s ease 0s 2 alternate;*/ animation: loading 0.5s ease 0s infinite alternate; } .box div:nth-child(2){ background-color: darkorange; animation: loading 0.5s ease 0.1s infinite alternate; } .box div:nth-child(3){ background-color: lightcoral; animation: loading 0.5s ease 0.2s infinite alternate; } .box div:nth-child(4){ background-color: gold; animation: loading 0.5s ease 0.3s infinite alternate; } .box div:nth-child(5){ background-color: burlywood; animation: loading 0.5s ease 0.4s infinite alternate; } @keyframes loading{ from{ /*縮放y軸*/ transform:scaleY(1) } to{ transform: scaleY(0.5); } } </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <p>loading...</p> </div> </body> </html>
成品展示：
是不是還萌萌噠~