Cara membuat efek loading Domino bergerak
by
muzadidil
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="artboard">
<div class="domino">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
box-sizing: border-box;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, a, p, span {
padding-bottom: 0.714em !important;
padding-top: 0.714em !important;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 400;
color: #ffffff;
font-weight: bold;
text-align: center;
}
footer {
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
position: fixed;
width: 100%;
background: #E9E0D6;
text-align: center;
}
footer .content {
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
height: 80px;
}
footer .content .bottom {
padding: 0;
margin: 0;
top: 10%;
}
footer .content .bottom .beat {
color: red;
-webkit-animation: beat 0.3s infinite alternate;
animation: beat 0.3s infinite alternate;
}
footer .content .top {
font-size: 25px;
}
footer .content .top .fa-twitter:hover {
transition: 350ms ease-in-out;
color: #55acee;
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
footer .content .top .fa-youtube:hover {
transition: 350ms ease-in-out;
color: #cd201f;
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
footer .content .top .fa-instagram:hover {
transition: 350ms ease-in-out;
color: #e4405f;
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
footer .content .top .fa-codepen:hover {
transition: 350ms ease-in-out;
color: #FFDD40;
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
footer .content .top a {
padding: 10px;
}
footer .content .top i {
transition: 500ms ease-in-out;
}
body {
background: #E9E0D6;
font-family: "Raleway", sans-serif;
text-align: center;
}
.noselect {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.artboard {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
position: absolute;
}
.domino > div {
border-radius: 8px;
display: inline-flex;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 50px;
height: 50px;
-webkit-animation: domino-effect 2.4s infinite ease-in-out;
animation: domino-effect 2.4s infinite ease-in-out;
}
.domino > div:nth-child(1) {
background: #354558;
}
.domino > div:nth-child(1):after {
background: #354558;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.domino > div:nth-child(2) {
background: #625059;
}
.domino > div:nth-child(2):after {
background: #625059;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.domino > div:nth-child(3) {
background: #905b5c;
}
.domino > div:nth-child(3):after {
background: #905b5c;
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.domino > div:nth-child(4) {
background: #bd665e;
}
.domino > div:nth-child(4):after {
background: #bd665e;
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.domino > div:nth-child(5) {
background: #eb7260;
}
.domino > div:nth-child(5):after {
background: #eb7260;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.domino > div:nth-child(1) {
margin: 23px;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.domino > div:nth-child(2) {
margin: 23px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.domino > div:nth-child(3) {
margin: 23px;
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.domino > div:nth-child(4) {
margin: 23px;
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.domino > div:nth-child(5) {
margin: 23px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.domino > div:after {
content: "";
position: relative;
top: 0px;
left: -70px;
opacity: 0;
border-radius: 8px;
width: 50px;
height: 50px;
-webkit-animation: illusion 2.4s infinite ease-in-out;
animation: illusion 2.4s infinite ease-in-out;
}
@-webkit-keyframes beat {
to {
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
}
@keyframes beat {
to {
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
}
}
@keyframes spin {
to {
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
}
}
@-webkit-keyframes domino-effect {
20%,100% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
@keyframes domino-effect {
20%,100% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
@-webkit-keyframes illusion {
0%, 25% {
opacity: 1;
}
26.10%, 33.33%, 100% {
opacity: 0;
}
}
@keyframes illusion {
0%, 25% {
opacity: 1;
}
26.10%, 33.33%, 100% {
opacity: 0;
}
}
Tags
muzadidil
Intovert, Cepat beradaptasi, simple, Fokus, Cenderung Lebih suka makan daripada Minum.
Komentar