let a = {
fill: 'none',
radius: 25,
strokeWidth: {50: 0},
scale: {0: 1},
duration: 500,
left: 0,
top: 0,
easing: 'cubic.out'
}
const main = new mojs.Shape({
...a,
stroke: 'cyan',
})
const smallCircles = []
const colors = ['deeppink', 'magenta', 'yellow', '#00F87F']
for (let i = 0; i < colors.length; i++) {
smallCircles.push(new mojs.Shape({
...a,
parent: main.el,
strokeWidth: {30: 0},
left: '50%',
top: '50%',
stroke: colors[i],
delay: 'rand(0,350)',
x: 'rand(-50,50)',
y: 'rand(-50,50)',
radius: 'rand(5, 20)'
}))
}
document.addEventListener('click', e => {
// 这种是中心点
main.tune({x: e.pageX, y: e.pageY}).replay()
//剩下的四个是随机的
for (let i = 0; i < smallCircles.length; i++) {
smallCircles[i].generate().replay();
}
})
This Pen doesn't use any external CSS resources.