使用SVG滤镜和CSS3实现的按钮悬停粘稠（肿胀）变形动画

Gooey button hover effect with SVG filters and CSS

svg, filter, gooey

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

:root {
    --bg: #1a1e24;
    --color: #eee;
    --font: Montserrat, Roboto, Helvetica, Arial, sans-serif;
}
.wrapper {
    padding: 1.5rem 0;
    -webkit-filter: url('#goo');
    filter: url('#goo');
}
.button {
    display: inline-block;
    text-align: center;
    background: var(--color);
    color: var(--bg);
    font-weight: bold;
    padding: 1.18em 1.32em 1.03em;
    line-height: 1;
    border-radius: 1em;
    position: relative;
    min-width: 8.23em;
    text-decoration: none;
    font-family: var(--font);
    font-size: 1.25rem;
}
.button:before,
.button:after {
    width: 4.4em;
    height: 2.95em;
    position: absolute;
    content: "";
    display: inline-block;
    background: var(--color);
    border-radius: 50%;
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
    -webkit-transform: scale(0);
    transform: scale(0);
    z-index: -1;
}
.button:before {
    top: -25%;
    left: 20%;
}
.button:after {
    bottom: -25%;
    right: 20%;
}
.button:hover:before,
.button:hover:after {
    -webkit-transform: none;
    transform: none;
}
/* Demo styles */

body {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--bg)
}

HTML

Gooey button hover effect with SVG filters and CSS

svg, filter, gooey

编辑器支持Emmet

快捷键

Gooey button hover effect with SVG filters and CSS

svg, filter, gooey

使用D3.js（Canvas）和SVG滤镜实现的彩色粘稠染料点滴滑落动画特效

使用SVG过滤器和CSS3动画实现的文本特效 弯弯曲曲的蚯蚓字

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

使用SVG过滤器和CSS3动画实现的文本特效弯弯曲曲的蚯蚓字