如何用純 CSS 創作一個方塊旋轉動畫
阿新 • • 發佈:2018-12-08
效果預覽
線上演示按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。
https://codepen.io/comehope/pen/gjgyWm
可互動視訊
此視訊是可以互動的,你可以隨時暫停視訊,編輯視訊中的程式碼。
請用 chrome, safari, edge 開啟觀看。
https://scrimba.com/p/pEgDAM/czDMNsw
原始碼下載
本地下載每日前端實戰系列的全部原始碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
程式碼解讀
定義 dom,容器中包含 4 個元素:
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
畫出容器中心的方塊:
.loader{
width: 10em;
height: 10em;
border: 0.25em solid white;
font-size: 10px;
border-radius: 1em;
}
畫出容器四周的方塊:
.loader, .loader span { position: absolute; } .loader span:nth-child(1) { top: 5em; left: 5em; } .loader span:nth-child(2) { top: -5em; left: 5em; } .loader span:nth-child(3) { top: 5em; left: -5em; } .loader span:nth-child(4) { top: -5em; left: -5em; }
給方塊上色:
.loader,
.loader span {
mix-blend-mode: screen;
}
.loader {
background-color: gold;
}
.loader span:nth-child(1) {
background-color: dodgerblue;
}
.loader span:nth-child(2) {
background-color: hotpink;
}
.loader span:nth-child(3) {
background-color: mediumpurple;
}
.loader span:nth-child(4) {
background-color: limegreen;
}
為容器整體增加旋轉動畫:
.loader {
animation: rotating 2s linear infinite;
}
@keyframes rotating {
to {
transform: rotate(1turn);
}
}
為容器四周的方塊增加反向旋轉的動畫效果:
.loader span {
animation: de-rotating 4s linear infinite;
}
@keyframes de-rotating {
from, to {
transform: rotate(0deg) scale(0.5);
}
50% {
transform: rotate(-180deg) scale(1.2);
}
}
最後,隱藏可能出現在頁面外部的內容:
body {
overflow: hidden;
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015721771