Animasi kotak
<!DOCTYPE html>
<html>
<head>
<title>Latihan koding Informatika MAN Kapuas</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #9999ff;
}
.loader{
height: 20vmin;
width: 20vmin;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.loader .square-item{
position: absolute;
height: 8vmin;
width: 8vmin;
border: 3px solid #ff1d5e;
margin: 0 auto;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.square-item:nth-child(1){
animation-name: load-one;
animation-delay: 0.5s;
}
.square-item:nth-child(2){
animation-name: load-two;
animation-delay: 0s;
border: 3px solid #3a5700;
}
.square-item:nth-child(3){
animation-name: load-three;
animation-delay: 0.5s;
border: 3px solid #0329e5;
}
.square-item:nth-child(4){
animation-name: load-four;
animation-delay: 0s;
border: 3px solid #fff;
}
@keyframes load-one {
50%{ transform: translate(150%, 150%) scale(2);}
}
@keyframes load-two {
50%{ transform: translate(-150%, 150%) scale(2);}
}
@keyframes load-three {
50%{ transform: translate(-150%, -150%) scale(2);}
}
@keyframes load-four {
50%{ transform: translate(150%, -150%) scale(2);}
}
</style>
</head>
<body>
<div class="loader">
<div class="square-item"></div>
<div class="square-item"></div>
<div class="square-item"></div>
<div class="square-item"></div>
</div>
</body>
</html>
0 komentar: