<div></div>
<div></div>
<div></div>
<div></div>
<button>Play</button>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
div {
margin: 20px;
width: 200px;
height: 100px;
background: #f36;
position: relative;
&::before {
content: '';
border: 10px solid #f36;
border-color: blue green lime orange;
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
transform: translate(-50%, -50%);
transform-origin: center;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: both;
}
&:nth-child(1).play::before {
animation-name: topAni;
}
&:nth-child(2).play::before {
animation-name: rightAni;
animation-delay: 1s;
animation-duration: 2s;
}
&:nth-child(3).play::before {
animation-name: bottomAni;
animation-delay: 2s;
animation-duration: 3s;
}
&:nth-child(4).play::before {
animation-name: leftAni;
animation-delay: 3s;
animation-duration: 4s;
}
}
@keyframes topAni {
0% {
border-top-color: transparent;
}
25% {
border-top-color: transparent;
border-right-color: transparent;
}
50% {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #f36;
}
75% {
border-color: transparent transparent #f36 transparent;
transform: translate(-50%, -50%);
}
100% {
transform: translate(-50%, -70px);
border-color: transparent transparent #f36 transparent;
}
}
@keyframes rightAni {
0% {
border-top-color: transparent;
}
25% {
border-top-color: transparent;
border-right-color: transparent;
}
50% {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
75% {
border-color: transparent transparent transparent #f36;
transform: translate(-50%, -50%);
}
100% {
transform: translate(100px, -50%);
border-color: transparent transparent transparent #f36;
}
}
@keyframes bottomAni {
0% {
border-top-color: #f36;
}
25% {
border-top-color: #f36;
border-right-color: transparent;
}
50% {
border-top-color: #f36;
border-right-color: transparent;
border-bottom-color: transparent;
}
75% {
border-color: #f36 transparent transparent transparent;
transform: translate(-50%, -50%);
}
100% {
transform: translate(-50%, 50px);
border-color: #f36 transparent transparent transparent;
}
}
@keyframes leftAni {
0% {
border-top-color: transparent;
}
25% {
border-top-color: transparent;
border-right-color: #f36;
}
50% {
border-top-color: transparent;
border-right-color: #f36;
border-bottom-color: transparent;
}
75% {
border-color: transparent #f36 transparent transparent;
transform: translate(-50%, -50%);
}
100% {
transform: translate(-120px, -50%);
border-color: transparent #f36 transparent transparent;
}
}
button {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 20px;
display: inline-flex;
justify-content: center;
align-items: center;
padding:15px 30px;
background: #1abc9c;
color:rgb(255,255,255);
text-transform: uppercase;
letter-spacing: 1px;
box-shadow:0px 2px 2px rgba(0,0,0,0.2);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 5px;
cursor: pointer;
}
View Compiled
const btnEle = document.querySelector('button');
const divEle = document.querySelectorAll('div');
btnEle.addEventListener('click', function(){
for(let i = 0; i < divEle.length; i++) {
divEle[i].classList.add('play');
}
}, false)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.