Lunar.js SVG 社交账号关注动画

Follower checkmark Source: https://github.com/toddmotto/lunar

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/*! lunar.js v1.1.0 | (c) 2014 @toddmotto | https://github.com/toddmotto/lunar */
(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(factory);
    } else if (typeof exports === 'object') {
        module.exports = factory;
    } else {
        root.lunar = factory();
    }
})(this, function() {

'use strict';

var lunar = {};

lunar.hasClass = function(elem, name) {
        return new RegExp('(\\s|^)' + name + '(\\s|$)').test(elem.getAttribute('class'));
    };

lunar.addClass = function(elem, name) {
        !lunar.hasClass(elem, name) && elem.setAttribute('class', (!!elem.getAttribute('class') ? elem.getAttribute('class') + ' ' : '') + name);
    };

lunar.removeClass = function(elem, name) {
        var remove = elem.getAttribute('class').replace(new RegExp('(\\s|^)' + name + '(\\s|$)', 'g'), '$2');
        lunar.hasClass(elem, name) && elem.setAttribute('class', remove);
    };

lunar.toggleClass = function(elem, name) {
        lunar[lunar.hasClass(elem, name) ? 'removeClass' : 'addClass'](elem, name);
    };

return lunar;

});

$('document').ready(function() {
    var checkmark = $('.checkmark');
    // var checkmark = document.querySelector('.checkmark');

checkmark.click(function() {
        // this.classList.add("checked");
        lunar.toggleClass(this, 'checked');
        // $(this).css('transform', 'scale(.5)');
        // $( this ).addClass( "checked" );
        console.log('clicked');

});

编译

CSS

body {
    background-color: black;
}
.person-icon {
    stroke: none;
}
.plus {
    transform-origin: 50% 50%;
    transition: all 0.2s ease-out;
    -webkit-transform: translate(0px, 0px) rotate(0deg);
}
.checkmark {
    width: 40px;
    height: 40px;
    border-radius: 0%;
    display: block;
    stroke-width: 4;
    stroke: #000;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #fbd901;
    transition: all 0.5s ease-out;
}
.checkmark:hover .body-icon {
    -webkit-animation: move-head 0.3s forwards ease-out;
}
.checkmark:hover .plus {
    -webkit-transform: rotate(180deg);
}
.checkmark__circle {
    stroke-width: 0;
    stroke-miterlimit: 10;
    stroke: #fbd901;
    fill: #fbd901;
    transform: scale(0.2, 0.2);
    transition: all 0.2s ease-in-out;
    transform-origin: 50% 40%;
}
.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
}
.checkmark.checked {
    animation: scale 0.3s ease-in-out 0.9s both;
}
.checkmark.checked .plus {
    transform: translate(-10px, 10px);
}
.checkmark.checked .checkmark__circle {
    stroke-miterlimit: 10;
    stroke: #fbd901;
    transform: scale(1, 1);
}
.checkmark.checked .checkmark__check {
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}
@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #fbd901;
    }
}
@keyframes rotate-plus {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(90deg);
    }
}
@keyframes move-head {
    0% {
        -webkit-transform: translateY(0px);
    }
    30% {
        -webkit-transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0px);
    }
}

HTML

</g>
    <g id="checkmark-icon">
        <circle class="checkmark__circle" fill="none" cx="19.5" cy="19.5" r="18.5" />
        <path class="checkmark__check" fill="none" d="M10.7,20.4l5.3,5.3l12.4-12.5" />
    </g>
</svg>

Follower checkmark Source: https://github.com/toddmotto/lunar

编辑器支持Emmet

快捷键

Follower checkmark Source: https://github.com/toddmotto/lunar

HTML5 SVG基于Matter.js实现的粒子管道流动动画

HTML5 Vue.js+D3.js+GSAP交互式机场飞行距离演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：