CSS
html, body {
background: #304352;
background: linear-gradient(to left, #304352 , #d7d2cc);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.scene {
width: 500px;
height: auto;
background-color: transparent;
border: 6px solid #2c3e50;
margin: 0 auto;
border-radius: 50%;
}
.box {
overflow: hidden;
width: 250px;
height: 1px;
background-color: #34495e;
text-align: center;
display: relative;
font-size: 16pt;
}
.box-container {
font-size: 0;
background-color: #bdc3c7;
overflow: hidden;
transform: rotate(90deg);
border-radius: 50%;
}
JAVASCRIPT
$(".box").each(function(i) {
var $box_item = $(this);
TweenMax.to($box_item, 1, {
delay: 0.001 * i,
ease: Elastic.easeInOut,
width:250 - Math.random() * 500 + 250,
yoyo:true,
repeat:-1,
repeatDelay:0.01
})
});
1 Response