svg可交互音箱（音乐播放）动画图标

点击音箱图标，变成三点波浪动画。

css, svg, voice

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
}
input {
    display: none;
}
.background {
    position: relative;
    background: linear-gradient(to bottom, #9e72d4 0%, #684297 100%);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
    width: 400px;
    height: 400px;
    cursor: pointer;
}
.background .circle {
    fill: none;
    stroke-width: 3;
    stroke-opacity: 0.5;
}
.background .loader {
    fill: none;
    stroke: white;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 0;
    transform-origin: center;
}
.background .microphone {
    position: absolute;
    fill: white;
    height: 40px;
    width: auto;
}
.background .dotWrapper {
    opacity: 0;
    position: absolute;
    width: 50px;
    height: 10px;
}
.background .dotWrapper .dot {
    position: absolute;
    border-radius: 50%;
    background-color: white;
    height: 10px;
    width: 10px;
}
.background .dotWrapper .dot-1 {
    right: 0;
}
.background .dotWrapper .dot-3 {
    right: 20px;
}
input:checked ~ .background .loader {
    animation: line 5s linear infinite, spin 10s linear infinite;
    stroke-dasharray: 280;
}
input:checked ~ .background .microphone {
    animation: microphone 0.5s ease-in-out both;
}
input:checked ~ .background .dotWrapper {
    opacity: 1;
    animation: dots 1s ease-in-out both;
}
input:checked ~ .background .dotWrapper .dot-1,
input:checked ~ .background .dotWrapper .dot-2,
input:checked ~ .background .dotWrapper .dot-3 {
    animation: dot 1s ease-in-out infinite;
}
input:checked ~ .background .dotWrapper .dot-2 {
    animation-delay: -0.4s;
}
input:checked ~ .background .dotWrapper .dot-3 {
    animation-delay: -0.2s;
}
@keyframes line {
    0% {
        stroke-dashoffset: 1120;
    }
    100% {
        stroke-dashoffset: 560;
    }
}
@keyframes spin {
    0% {
        transform: rotate(-90deg) translate3d(0, 0, 0);
    }
    100% {
        transform: rotate(270deg) translate3d(0, 0, 0);
    }
}
@keyframes microphone {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes dots {
    0%, 50% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes dot {
    0%, 100% {
        top: 5px;
    }
    50% {
        top: -5px;
    }
}

HTML

点击音箱图标，变成三点波浪动画。

css, svg, voice

编辑器支持Emmet

快捷键

点击音箱图标，变成三点波浪动画。

css, svg, voice

gsap和svg filter实现乱流（turbulence）加载动画

汉堡菜单图标的5个常用变形动画（左右箭头和关闭添加）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：