鼠标悬停时向四周冒泡的口香糖按钮

blobby button with bubbles when hover

h5, svg, button

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var tl = new TimelineMax({
    paused: true
})
tl.set('.circle', {
    autoAlpha: 0
})
tl.to("#bgBlobStart", 3, {
        morphSVG: {
            shape: "#bgBlobEnd",
            type: "rotational"
        },
        ease: Back.easeOut.config(3),
    }, 0.2)
    .to("#frontBlobStart", 3, {
        morphSVG: {
            shape: "#frontBlobEnd",
            type: "rotational"
        },
        ease: Back.easeOut.config(3),
    }, 0)
    .staggerFrom(".circleTop", 1.5, {
        x: -100,
        y: 100,
        autoAlpha: 0,
        svgOrigin: "center",
        ease: Back.easeOut.config(3),
    }, 0.15, 0.5)
    .staggerFrom(".circleBottom", 1, {
        x: 100,
        y: -100,
        autoAlpha: 0,
        svgOrigin: "center",
        ease: Back.easeOut.config(3),
    }, 0.15, 0.5)
    .staggerTo(".circleTop", .1, {
        autoAlpha: 1,
        ease: Back.easeOut.config(3),
    }, 0.15, 0.5)
    .staggerTo(".circleBottom", .1, {
        autoAlpha: 1,
        ease: Back.easeOut.config(3),
    }, 0.15, 0.5)

var Button = document.querySelector("#Button");

Button.addEventListener("mouseenter", over);
Button.addEventListener("mouseleave", out);

function over() {
    tl.play().timeScale(1);
}

function out() {
    console.log("leaving");
    tl.reverse().timeScale(3);
}

编译

CSS

HTML

</g>
        </mask>
        <path id="frontBlobStart" class="frontBlob" d="M981.72 372.33c56.87 13.9 100.57 39.75 119.1 69.47 18.69 29.61 12.06 63.19 2.24 95.77s-22.64 64.15-59.94 84.86C1006 643.2 944.56 653 882.26 672.51c-62.48 19.52-126 48.76-198 58.09s-152.7-1.24-215.47-25.14-107.61-61.15-106.2-100.18c1.24-38.93 48.72-79.64 103.82-108.11s117.62-44.86 172-66.51 100.38-48.86 158.5-61.47 127.94-10.75 184.81 3.14z"
        />
        <path id="frontBlobEnd" class="frontBlob" d="M915.49 434c62.08 31.56 138.58 48.94 170.89 76.61 32.14 27.65 19.92 65.59 13.7 107.53-6.4 41.93-7 87.76-51.66 110.19-44.52 22.45-133.32 21.41-209.14 12.6-75.65-8.7-138.66-25.28-189.62-44.87-51.13-19.6-90.21-42.2-147.44-66.72s-132.41-51.09-166.37-86.25C301.71 508 309 464.35 347 431.66S453.7 377.25 527.43 359c73.56-18.35 151.94-33.34 215.05-17.91S853.24 402.42 915.49 434z"
        />

<path class="Button__text" d="M546.47 594.6V531h17.23v22.75h8.16V531h17.23v63.6h-17.23v-28.89h-8.16v28.89zM601.48 590.49q-5.48-4.71-5.48-13.23V547q0-8.22 5.44-12.41t15.92-4.18q10.49 0 15.92 4.18t5.48 12.41v30.3q0 8.6-5.44 13.27t-15.92 4.66q-10.48-.04-15.92-4.74zm19-8.48a8.78 8.78 0 0 0 .81-4.15v-31.12a6.57 6.57 0 0 0-.76-3.37c-.5-.86-1.52-1.3-3.07-1.3q-4.34 0-4.33 4.82v31a7.67 7.67 0 0 0 .91 4.15 3.64 3.64 0 0 0 3.32 1.41 3.23 3.23 0 0 0 3.16-1.45zM653.67 594.6L643 530.89h16.53l6.34 43.34 5.65-43.34H688l-10.65 63.71zM693 594.6V531h34.66v12.3h-17v12.37h16.32v12H710.6v14.6h18.13v12.33zM734.48 531h26.6q6.34 0 9.82 2.11a10.4 10.4 0 0 1 4.68 5.93 32.71 32.71 0 0 1 1.21 9.74c0 3.61-.64 6.42-1.91 8.45s-3.49 3.43-6.65 4.22a8.41 8.41 0 0 1 5.69 2.89 10 10 0 0 1 1.77 6.22l-.21 24.08h-16.92v-24.93c0-1.78-.47-2.92-1.41-3.41a12.37 12.37 0 0 0-5.14-.74v29h-17.53zm21.76 23.56q3.63 0 3.63-5.78a16.85 16.85 0 0 0-.31-3.78 2.62 2.62 0 0 0-1.1-1.74 4.59 4.59 0 0 0-2.32-.48h-4v11.78zM806.11 594.6V531h26.4l7.25 38.82L847 531h26.6v63.6h-15.8v-45.86l-10 45.86h-15.49l-10.58-45.86v45.86zM881.27 594.6V531h34.66v12.3h-17v12.37h16.32v12h-16.34v14.6H917v12.33z"
        />
    </svg>
    <span class="screenreader-only">Click here.</span>
</button>

blobby button with bubbles when hover

h5, svg, button

编辑器支持Emmet

快捷键

blobby button with bubbles when hover

h5, svg, button

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

使用SVG实现的按钮口香糖吹泡泡动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：