鼠标点击效果

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

'use strict';

var OPTS = {
    fill: 'none',
    radius: 25,
    strokeWidth: { 50: 0 },
    scale: { 0: 1 },
    angle: { 'rand(-35, -70)': 0 },
    duration: 500,
    left: 0,
    top: 0,
    easing: 'cubic.out'
};

var circle1 = new mojs.Shape(_extends({}, OPTS, {
    stroke: '#FF8966'
}));

var circle2 = new mojs.Shape(_extends({}, OPTS, {
    radius: { 0: 15 },
    strokeWidth: { 30: 0 },
    stroke: '#E5446D',
    delay: 'rand(75, 150)'
}));

document.addEventListener('click', function (e) {
    circle1.tune({ x: e.pageX, y: e.pageY }).replay();

circle2.tune({ x: e.pageX, y: e.pageY }).replay();
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg