<div class="box-wrapper">
<div class="box">
<div class="box-item white"></div>
<div class="box-item orange"></div>
<div class="box-item red"></div>
</div>
</div>
.box-wrapper {
font-weight: bold;
display: inline-block;
margin-top: 10px;
width: 165px;
transform: rotate(-24deg);
-ms-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
-webkit-transform: rotate(-24deg);
-o-transform: rotate(-24deg);
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s;
-o-transition: 2s;
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.box-wrapper:hover {
font-size: 30px;
transform: scale(1.3);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-ms-transform: scale(1.3);
}
.box {
margin: 0 auto;
position: relative;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: white;
}
.box::before,
.box::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 4px solid transparent;
animation-timing-function: linear;
}
.box::before {
top: 0;
left: 0;
border-top-color: black;
border-right-color: black;
animation: border-before 1.5s infinite;
animation-direction: alternate;
}
.box::after {
bottom: 0;
right: 0;
border-bottom-color: black;
border-left-color: black;
animation: border-after 1.5s infinite;
animation-direction: alternate;
}
.box .box-item {
position: absolute;
}
.box .red {
top: 4px;
bottom: 0;
left: 0;
border-right: 4px solid black;
background-color: #EA5664;
animation: red 1.5s infinite;
animation-direction: alternate;
}
.box .orange {
bottom: 0;
left: 27%;
right: 4px;
border-top: 4px solid black;
background-color: #F3B93F;
animation: orange 1.5s infinite;
animation-direction: alternate;
}
.box .white {
right: 5px;
top: 4px;
buttom: 50%;
height: 50%;
border-left: 4px solid black;
background-color: #fff;
animation: white 1.5s infinite;
animation-direction: alternate;
}
@keyframes border-before {
0% {
width: 0;
height: 0;
border-right-color: transparent;
}
5.99% {
border-right-color: transparent;
}
6% {
height: 0;
width: 100%;
border-right-color: black;
}
25%,
100% {
width: 100%;
height: 100%;
}
}
@keyframes border-after {
0%,
24.99% {
width: 0;
height: 0;
border-left-color: transparent;
border-bottom-color: transparent;
}
25% {
border-left-color: transparent;
border-bottom-color: black;
}
36.99% {
border-left-color: transparent;
}
37% {
height: 0;
width: 100%;
border-left-color: black;
}
50%,
100% {
width: 100%;
height: 100%;
}
}
@keyframes red {
0%,
50% {
width: 0;
opacity: 0;
}
50.01% {
opacity: 1;
}
65%,
100% {
width: 27%;
opacity: 1;
}
}
@keyframes orange {
0%,
65% {
height: 0;
opacity: 0;
}
65.01% {
opacity: 1;
}
80%,
100% {
height: 50%;
opacity: 1;
}
}
@keyframes white {
0%,
75% {
width: 0;
opacity: 0;
}
75.01% {
opacity: 1;
}
90%,
100% {
width: 27%;
opacity: 1;
}
}