今天是第20天!!完成三分之二啦!!很開心餒XD

今天是介紹最後一個loading圖示設計，一樣會先給大家看看成品喔!

成品展示:

是不是看起來很高級呀!

以下是程式碼喔!
.html

  <div class="cssload-tetrominos">
    <div class="cssload-tetromino cssload-box1"></div>
    <div class="cssload-tetromino cssload-box2"></div>
    <div class="cssload-tetromino cssload-box3"></div>
    <div class="cssload-tetromino cssload-box4"></div>
  </div>

.css

.cssload-tetrominos {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -47px;
	margin-left: -55px;
	transform: translate(-109px, -94px);
}
.cssload-tetromino {
	width: 94px;
	height: 109px;
	position: absolute;
	transition: all ease 0.35s;
	background: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 684"%3E%3Cpath fill="%23010101" d="M305.7 0L0 170.9v342.3L305.7 684 612 513.2V170.9L305.7 0z"/%3E%3Cpath fill="%23fff" d="M305.7 80.1l-233.6 131 233.6 131 234.2-131-234.2-131"/%3E%3C/svg%3E') no-repeat top center;
}

.cssload-box1 {
	animation: cssload-tetromino1 2s ease-out forwards;
}
.cssload-box2 {
	animation: cssload-tetromino2 2s ease-out forwards;
}
.cssload-box3 {
	animation: cssload-tetromino3 2s ease-out forwards;
	z-index: 2;
}
.cssload-box4 {
	animation: cssload-tetromino4 2s ease-out forwards;
}
@keyframes cssload-tetromino1 {
	0%, 40% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(47px, -26px);
	}
	60%, 100% {
		transform: translate(0, 0);
	}
}
@keyframes cssload-tetromino2 {
	0%, 20% {
		transform: translate(94px, 0px);
	}
	40%, 100% {
		transform: translate(141px, 26px);
	}
}
@keyframes cssload-tetromino3 {
	0% {
		transform: translate(94px, 109px);
		z-index: 10;
	}
	20%, 60% {
		transform: translate(94px, 53px);
		z-index: 10;
	}
	90%, 100% {
		transform: translate(47px, 26px);
	}
}
@keyframes cssload-tetromino4 {
	0%, 80% {
		transform: translate(47px, 26px);
		z-index: 4;
	}
	90%, 100% {
		transform: translate(94px, 52px);
		z-index: 4;
	}
}

動畫的部分可以看你喜歡怎麼移動來修改transform: translate()的位置，非常隨意!且數量也能隨意增減。

在一開始不確定每個方塊圖片是代表哪個的時候，可以幫他們加邊框，用顏色區分方塊，這樣用起來很方便!

而且再套個全螢幕的背景再設個animation，就和昨天的一樣很適合當作過場畫面!!

以上是我開賽的第二十天，讓我們來期待第二十一天的到來吧!
加油、加油! 倒數10天。