IBM的音译卡通图标

I = Eye（眼睛） B = Bee（蜜蜂）使用SVG实现的图标。

svg, logo

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var eye = document.querySelector("#eye");
var bee = document.querySelector("#bee");
var m = document.querySelector("#m");
var buzzAngle = 0;
var buzzIndex = 0;

var beeData = {
    index: 0,
    buzzAngle: 0,
    wiggleAngle: 0,
    timeout: 0
};
var eyeData = {
    topLid: 1,
    bottomLid: 1
};

randomWiggle();

function squintComplete() {
    animateEye();
    blink(null);
}

function wiggle() {
    beeData.index += 2;
    TweenMax.to(beeData, 1.5, {
        wiggleAngle: Math.PI * beeData.index * 2,
        onUpdate: setWiggle,
        ease: Quart.easeInOut
    });
}

bee.addEventListener("click", onBee);

function onBee(e) {
    poke(e);
    clearTimeout(beeData.timeout);
    randomWiggle();
}

function randomWiggle() {
    beeData.timeout = setTimeout(randomWiggle, 7000 + (5000 * Math.random()));
    buzz();
    wiggle();
}

function animateEye() {
    var x = ((Math.random() * 50) - 25);
    var y = ((Math.random() * 40) - 20);
    TweenMax.to("#eyeBall", .3, {
        x: x,
        y: y,
        ease: Quint.easeInOut
    });
    TweenMax.delayedCall((Math.random() * 3) + .1, animateEye);
}

}

function blink(hold) {
    if (hold !== null) {
        TweenMax.to(eyeData, .3, {
            topLid: 1,
            ease: Quint.easeIn,
            onUpdate: drawLid
        });
        TweenMax.to(eyeData, .3, {
            delay: 0.3,
            topLid: 0,
            ease: Quint.easeOut,
            onUpdate: drawLid
        });
    }

TweenMax.delayedCall((Math.random() * 4) + 1, blink);
}

function poke(e) {
    TweenMax.to(e.currentTarget, .1, {
        scale: .9,
        transformOrigin: "center",
        ease: Power2.easeOut
    });
    TweenMax.to(e.currentTarget, .5, {
        delay: .1,
        scale: 1,
        transformOrigin: "center",
        ease: Back.easeOut.config(6)
    });
}

function onEye(e) {
    TweenMax.killDelayedCallsTo(blink);
    TweenMax.killDelayedCallsTo(animateEye);
    TweenMax.killTweensOf("#eyeBall");
    squint.seek(0);
    squint.play();
    poke(e);
}
var targetM = 0;
var scope = this;

function onM(e) {
    TweenMax.killDelayedCallsTo(onM);
    targetM -= 3744;
    poke(e);
    TweenMax.to("#lines", 2, {
        "stroke-dashoffset": targetM,
        ease: Quint.easeOut
    });

TweenMax.delayedCall((Math.random() * 4) + 6, onM, [{
        currentTarget: scope
    }]);
}
onM({
    currentTarget: this
});
eye.addEventListener("click", onEye);
m.addEventListener("click", onM);

编译

CSS

HTML

I = Eye（眼睛） B = Bee（蜜蜂）使用SVG实现的图标。

svg, logo

编辑器支持Emmet

快捷键

I = Eye（眼睛） B = Bee（蜜蜂） 使用SVG实现的图标。

svg, logo

SVG 3D视觉效果的M字母创意图标

一款带光圈阴影的纯CSS3 Instagram图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

I = Eye（眼睛） B = Bee（蜜蜂）使用SVG实现的图标。