SAKJANESIP - Cube animation itu apa sih kak? Cube adalah kota sedangkan animation adalah animasi, jadi ya kotak animasi, hehe. Langsung saja ya ke TKP.
 |
| Cube Animation |
Silahkan di kreatifitaskan kode di bawah ini dengan keinginan sobat, karena ini masih beta. So jangan di rusak tapi dikembangkan ya.
Cara Membuat Cube Animation dengan CSS
.hero
.hero__title create by Zhuberzhu
.cube
.cube
.cube
.cube
.cube
.cube
Silahkan taruh kode di atas di bagian HTML Jade.
@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
// cb BY Zhuberzhu
.hero {
background-color: #0040C1;
position: relative;
height: 100vh;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
}
.hero__title {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
z-index: 1;
}
.cube {
position: absolute;
top: 80vh;
left: 45vw;
width: 10px;
height: 10px;
border: solid 1px darken(#0040C1, 8%);
transform-origin: top left;
transform: scale(0) rotate(0deg) translate(-50%, -50%);
animation: cube 12s ease-in forwards infinite;
&:nth-child(2n) {
border-color: lighten(#0040C1, 10%);
}
&:nth-child(2) {
animation-delay: 2s;
left: 25vw;
top: 40vh;
}
&:nth-child(3) {
animation-delay: 4s;
left: 75vw;
top: 50vh;
}
&:nth-child(4) {
animation-delay: 6s;
left: 90vw;
top: 10vh;
}
&:nth-child(5) {
animation-delay: 8s;
left: 10vw;
top: 85vh;
}
&:nth-child(6) {
animation-delay: 10s;
left: 50vw;
top: 10vh;
}
}
@keyframes cube {
from {
transform: scale(0) rotate(0deg) translate(-50%, -50%);
opacity: 1;
}
to {
transform: scale(20) rotate(960deg) translate(-50%, -50%);
opacity: 0;
}
}
Buat kode di atas ini silahkan taruh di file SCSS. Selamat mencoba.
EmoticonEmoticon