css svg按钮冒泡动画特效

源码

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<defs><filter id="gooey">
		<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"></feGaussianBlur><feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="highContrastGraphic"></feColorMatrix><feComposite in="SourceGraphic" in2="highContrastGraphic" operator="atop"></feComposite>
	</filter></defs>
</svg>
<button id="gooey-button">
	https://www.fly63.com 
	<span class="bubbles">
		<span class="bubble"></span>
		<span class="bubble"></span>
		<span class="bubble"></span>
		<span class="bubble"></span>
		<span class="bubble"></span>
		<span class="bubble"></span>
		<span class="bubble"></span>
		<span class="bubble"></span>
		<span class="bubble"></span>
		<span class="bubble"></span>
	</span>
</button>

<style type="text/css">
body,html {
    align-items: center;
    background-color: #0c1016;
    display: flex;
    font-family: "Roboto";
    font-size: 10px;
    height: 100%;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 100%
}

* {
    box-sizing: border-box
}

svg {
    position: absolute;
    top: -4000px;
    left: -4000px
}

#gooey-button {
    padding: 1rem;
    font-size: 2rem;
    border: 0;
    color: #0c1016;
    filter: url("#gooey");
    position: relative;
    background-color: #00FF80
}

#gooey-button:focus {
    outline: 0
}

#gooey-button .bubbles {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

#gooey-button .bubbles .bubble {
    background-color: #00FF80;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: -1
}

#gooey-button .bubbles .bubble:nth-child(1) {
    left: 13px;
    width: 25px;
    height: 25px;
    animation: move-1 3.02s infinite;
    animation-delay: .2s
}

#gooey-button .bubbles .bubble:nth-child(2) {
    left: 18px;
    width: 25px;
    height: 25px;
    animation: move-2 3.04s infinite;
    animation-delay: .4s
}

#gooey-button .bubbles .bubble:nth-child(3) {
    left: 71px;
    width: 25px;
    height: 25px;
    animation: move-3 3.06s infinite;
    animation-delay: .6s
}

#gooey-button .bubbles .bubble:nth-child(4) {
    left: 35px;
    width: 25px;
    height: 25px;
    animation: move-4 3.08s infinite;
    animation-delay: .8s
}

#gooey-button .bubbles .bubble:nth-child(5) {
    left: 34px;
    width: 25px;
    height: 25px;
    animation: move-5 3.1s infinite;
    animation-delay: 1s
}

#gooey-button .bubbles .bubble:nth-child(6) {
    left: 36px;
    width: 25px;
    height: 25px;
    animation: move-6 3.12s infinite;
    animation-delay: 1.2s
}

#gooey-button .bubbles .bubble:nth-child(7) {
    left: 91px;
    width: 25px;
    height: 25px;
    animation: move-7 3.14s infinite;
    animation-delay: 1.4s
}

#gooey-button .bubbles .bubble:nth-child(8) {
    left: 62px;
    width: 25px;
    height: 25px;
    animation: move-8 3.16s infinite;
    animation-delay: 1.6s
}

#gooey-button .bubbles .bubble:nth-child(9) {
    left: 57px;
    width: 25px;
    height: 25px;
    animation: move-9 3.18s infinite;
    animation-delay: 1.8s
}

#gooey-button .bubbles .bubble:nth-child(10) {
    left: 49px;
    width: 25px;
    height: 25px;
    animation: move-10 3.2s infinite;
    animation-delay: 2s
}

@keyframes move-1 {
    0% {
        transform: translate(0,0)
    }
    99% {
        transform: translate(0,-109px)
    }
    100% {
        transform: translate(0,0);
        opacity: 0
    }
}

@keyframes move-2 {
    0% {
        transform: translate(0,0)
    }
    99% {
        transform: translate(0,-76px)
    }
    100% {
        transform: translate(0,0);
        opacity: 0
    }
}

@keyframes move-3 {
    0% {
        transform: translate(0,0)
    }
    99% {
        transform: translate(0,-125px)
    }
    100% {
        transform: translate(0,0);
        opacity: 0
    }
}

@keyframes move-4 {
    0% {
        transform: translate(0,0)
    }
    99% {
        transform: translate(0,-66px)
    }
    100% {
        transform: translate(0,0);
        opacity: 0
    }
}

@keyframes move-5 {
    0% {
        transform: translate(0,0)
    }
    99% {
        transform: translate(0,-74px)
    }
    100% {
        transform: translate(0,0);
        opacity: 0
    }
}

@keyframes move-6 {
    0% {
        transform: translate(0,0)
    }
    99% {
        transform: translate(0,-122px)
    }
    100% {
        transform: translate(0,0);
        opacity: 0
    }
}

@keyframes move-7 {
    0% {
        transform: translate(0,0)
    }
    99% {
        transform: translate(0,-80px)
    }
    100% {
        transform: translate(0,0);
        opacity: 0
    }
}

@keyframes move-8 {
    0% {
        transform: translate(0,0)
    }
    99% {
        transform: translate(0,-89px)
    }
    100% {
        transform: translate(0,0);
        opacity: 0
    }
}

@keyframes move-9 {
    0% {
        transform: translate(0,0)
    }
    99% {
        transform: translate(0,-72px)
    }
    100% {
        transform: translate(0,0);
        opacity: 0
    }
}

@keyframes move-10 {
    0% {
        transform: translate(0,0)
    }
    99% {
        transform: translate(0,-120px)
    }
    100% {
        transform: translate(0,0);
        opacity: 0
    }
}
</style>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/33_1622