消息通知徽章柔性气泡动画（带数字的消息提示图标）

Notification Badge Animation

h5, message

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    var bubblesCount = 70;

for (var i = 0; i < bubblesCount; i++) {
        $('.bubbles').append('<circle r="' + getRandomInt(5, 15) + '" cy="300" fill="#ff2900" cx="' + getRandomInt(40, 110) + '"></circle>');
    }

var html = $('.bubbles').html();

$('.bubbles').html(html);

function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

$('.bubbles circle').each(function() {
        var del = getRandomInt(0, 1000 * 3);
        var xv = getRandomInt(-35, 35);

anime({
            targets: $(this)[0],
            r: {
                value: 0,
                duration: 500,
                delay: del + 1000
            },
            translateX: {
                value: xv,
                duration: 800,
                delay: del,
            },
            translateY: {
                value: [0, -150],
                duration: 2000,
                delay: del,
            },
            loop: true,
            easing: 'linear'
        })
    });
});

编译

CSS

html,
body {
    height: 100%;
}
body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #010001;
    font-family: 'Raleway', sans-serif;
}
.box {
    position: relative;
    margin-top: 80px;
}
.box img {
    width: 200px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}
.box .count {
    font-size: 60px;
    color: #fff;
    position: absolute;
    top: -33px;
    right: -7px;
    z-index: 1;
    display: inline-block;
}
.box .count::before {
    content: '';
    position: absolute;
    top: 63%;
    left: 39%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: -6px 7px 55px #ff2900;
    opacity: 1;
}
.box svg {
    overflow: visible !important;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.bubbles {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 150px;
    height: 150px;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
}
#organic-blob {
    position: absolute;
    right: -65px;
    top: -169px;
}

HTML

</g>

Notification Badge Animation

h5, message

编辑器支持Emmet

快捷键

Notification Badge Animation

h5, message

HTML5 GSAP带彩色碎片（纸屑）化特效的文本打字动画

6款很棒的带几何图形动画的SVG商品销售（折扣优惠）横幅

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：