HTML5音频波浪按钮

Liquid Audio Button 用鼠标点击启动或停止波动动画。

svg, button

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    overflow: hidden;
    margin: 0;
    background: #1B1A1C;
}
.gooify {
    filter: url("#goo");
}
.visualizer-shell {
    height: 75px;
    width: 75px;
    cursor: pointer;
}
.visualizer-shell {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
}
.visualizer {
    position: relative;
    overflow: hidden;
    width: 60px;
    height: 70px;
    margin: 0 auto;
}
.visualizer .left {
    left: 0;
}
.visualizer .middle {
    left: 0;
    right: 0;
    margin: 0 auto;
}
.visualizer .right {
    right: 0;
}
.bar {
    position: absolute;
    top: 40px;
    display: inline-block;
    background: white;
    width: 20px;
    height: 20px;
    transform-origin: 50% 100%;
}
/*
* *----------------------------------
*  Social
* *----------------------------------
*/

.social-icon a {
    position: absolute;
    background: white;
    color: white;
    box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3);
    display: inline-block;
    width: 150px;
    height: 80px;
    transform-origin: 50% 50%;
    transition: .15s ease-out;
    z-index: 30;
}
.social-icon i {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    transition: .15s ease-out;
}
.youtube:hover a {
    transform: rotate(45deg) scale(1.05);
}
.youtube:hover i {
    color: #ec4c44;
}
.youtube a {
    bottom: -40px;
    left: -75px;
    transform: rotate(45deg);
}
.youtube i {
    bottom: 7px;
    left: 7px;
    color: #E62117;
}
.twitter:hover a {
    transform: rotate(-45deg) scale(1.05);
}
.twitter:hover i {
    color: #21c2ff;
}
.twitter a {
    bottom: -40px;
    right: -75px;
    transform: rotate(-45deg);
}
.twitter i {
    bottom: 7px;
    right: 7px;
    color: #00ACED;
}

HTML

Liquid Audio Button 用鼠标点击启动或停止波动动画。

svg, button

编辑器支持Emmet

快捷键

Liquid Audio Button 用鼠标点击启动或停止波动动画。

svg, button

HTML5 三角形 | 棱形开关按钮控件

HTML5渐变色流光液态按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：