使用Mo.js实现的社交按钮点击星光四射交互动效

Social Media Icons with mojs, 点击按钮除了动画外还伴有一个清脆的铃铛音效。

mo.js, button

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 4037
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var ping = new Audio('http://tmp.janustech.net/notes/pin.mp3');
var timelines = {};

$('.content .circle').each(function() {
    var $this = $(this);
    var id = '#' + $this.attr('id');
    var tl = new mojs.Timeline();

var circle = new mojs.Html({
        el: id,
        left: '50%',
        top: '50%',
        scale: {
            1: 0
        },
        duration: 500,
        easing: 'cubic.out'
    }).then({
        scale: {
            0: 1,
            duration: 500
        }
    });

var burst = new mojs.Burst({
        parent: id,
        radius: {
            0: 200
        },
        count: 7,
        children: {
            fill: {
                'cyan': 'yellow'
            },
            radius: 10,
            duration: 2000
        }
    });

tl.add(circle, burst);

timelines[$this.attr('id')] = tl;
});

var stopX = $('#main-notice').parent().width();

stopX += $('#main-notice').width() / 2 - 100;

var notice = new mojs.Html({
    el: '#main-notice',
    x: {
        0: 1000
    },
    duration: 2000,
    easing: 'cubic.in'
});

notice.play();

//new MojsPlayer({ add: notice });

$('.circle').on('click', function(e) {
    var tl = timelines[$(this).attr('id')];

ping.play();
    tl.replay();
});

编译

CSS

.circle {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: #83478b;
    margin-right: 15px;
    text-align: center;
    color: white;
    line-height: 50px;
    font-size: 28px;
}
body {
    background: #8d79ae;
}
.main {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.main .notice {
    display: none;
    position: absolute;
    top: 10px;
    left: -1000px;
    width: 500px;
    height: 30px;
    padding: 5px;
    text-align: center;
    font-family: 'Shrikhand', cursive;
    font-size: 22px;
    border: 3px solid black;
}
.main .content {
    width: 50vw;
    height: 75px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #080d3b;
}

HTML

Social Media Icons with mojs, 点击按钮除了动画外还伴有一个清脆的铃铛音效。

mo.js, button

编辑器支持Emmet

快捷键

Social Media Icons with mojs, 点击按钮除了动画外还伴有一个清脆的铃铛音效。

mo.js, button

使用React.js实现泡泡糖（软糖 | 口香糖）风格的社交按钮

使用CSS3 box-shadow实现的7个按钮悬停动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：