使用anime.js绘制的五角星闪烁动画

星星爆破的时间轴动画

h5, timeline, star

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var timeline = anime.timeline({
    autoplay: true,
    direction: 'normal',
    loop: true
});

timeline
    .add({
        targets: '.favorite__inactive',
        scale: {
            value: [1, 0],
            duration: 400,
            delay: 1000,
            easing: 'easeInQuad'
        }
    })
    .add({
        targets: '.favorite__halo-outer',
        scale: {
            value: [0, 1],
            duration: 400,
            delay: 1400,
            easing: 'easeOutQuad'
        },
        offset: 0
    })
    .add({
        targets: '.favorite__halo-inner',
        r: {
            value: [0, 49],
            duration: 300,
            delay: 1500,
            easing: 'easeOutQuad'
        },
        offset: 0
    })
    .add({
        targets: '.favorite__active',
        scale: {
            value: [0, 1],
            duration: 500,
            delay: 1600,
            easing: 'easeOutQuad'
        },
        opacity: {
            value: 1,
            duration: 1500,
            delay: 2500
        },
        offset: 0
    })
    .add({
        targets: '.favorite__sprinkle',
        opacity: {
            value: [0, 1],
            duration: 150,
            delay: 1500
        },
        offset: 0
    })
    .add({
        targets: '.favorite__sprinkle-circle',
        height: {
            value: [5, 12],
            duration: 100,
            delay: 1600,
            easing: 'easeOutQuad'
        },
        offset: 0
    })
    .add({
        targets: '.favorite__sprinkle-circle',
        height: {
            value: [12, 5],
            duration: 100,
            delay: 1700,
            easing: 'easeOutQuad'
        },
        offset: 0
    })
    .add({
        targets: '.favorite__sprinkle-circle',
        opacity: {
            value: [1, 0],
            duration: 500,
            delay: 1800,
            easing: 'easeOutQuad'
        },
        offset: 0
    })
    .add({
        targets: '.favorite__sprinkle-circle',
        translateY: {
            value: [0, -28],
            duration: 500,
            delay: 1600,
            easing: 'easeOutQuad'
        },
        offset: 0
    });

编译

CSS

HTML

星星爆破的时间轴动画

h5, timeline, star

编辑器支持Emmet

快捷键

星星爆破的时间轴动画

h5, timeline, star

使用Bodymovin.js制作的播放按钮等待动画

使用matter.js实现的浏览器崩溃元素掉落动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：