<div class="container">
<div class="button">Click me
<div class="blobs">
<div class="blob">
<div class="splash"></div>
<div class="splash"></div>
</div>
<div class="blob">
<div class="splash"></div>
<div class="splash"></div>
<div class="splash"></div>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="7 7" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo"></feColorMatrix>
<feComposite in="SourceGraphic" in2="goo"></feComposite>
</filter>
</defs>
</svg>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
@import url('https://fonts.googleapis.cn/css?family=Oswald');
$dur: 0.5s;
$button: #c853f8;
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
background: white;
height: 100%;
width: 100%;
background-color: #303247;
}
.container {
filter: url("#goo");
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 200px;
width: 300px;
}
@keyframes blob-left-top {
0% {
transform: scale(1.3, 0.9) rotate(-90deg) translate(0, 0);
opacity: 1;
}
50% {
transform: scale(1) translate(-30px, -30px);
opacity: 1;
}
100% {
transform: scale(0.4) translate(-80px, -80px);
opacity: 0;
}
}
@keyframes blob-right-bottom {
0% {
transform: scale(1.3, 0.9) rotate(-90deg) translate(0, 0);
opacity: 1;
}
50% {
transform: scale(0.8) translate(40px, 40px);
opacity: 0.9;
}
100% {
opacity: 0;
transform: scale(0.7) translate(50px, 50px);
}
}
@keyframes splash-1 {
40% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(25px, -45px);
}
}
@keyframes splash-2 {
40% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-55px, -30px);
}
}
@keyframes splash-3 {
40% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(5px, 40px);
}
}
@keyframes splash-4 {
40% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(30px, -5px);
}
}
@keyframes splash-5 {
40% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(20px, 5px);
}
}
@keyframes button-grow {
0% {
transform: scale(1) translate(-50%, -50%);
}
25% {
transform: scale(1.02) translate(-50%, -50%);
}
50% {
transform: scale(1) translate(-50%, -50%);
}
75% {
transform: scale(1.01) translate(-50%, -50%);
}
100% {
transform: scale(1) translate(-50%, -50%);
}
}
.button {
position: absolute;
white-space: nowrap;
background: $button;
padding: 20px 70px;
border-radius: 5px;
text-align: center;
color: white;
font-family: 'Oswald', Arial, sans-serif;
font-size:20px;
text-transform: uppercase;
letter-spacing:0.1em;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
animation: cubic-bezier(0.64, 0.57, 0.67, 1.53) $dur;
&:hover {
background-color: darken($button, 2%);
transition:0.25s ease;
}
}
.blob {
position: absolute;
background: darken($button, 2%);
border-radius: 50% 40%;
height: 25px;
width: 25px;
top: 0;
left: 0;
opacity: 0;
animation: cubic-bezier(0.2, 0, 1, 0.3) $dur;
.splash {
content: "";
position: absolute;
background-color: darken($button, 2%);
border-radius: 50%;
height: 5px;
width: 5px;
top: -12px;
left: 8px;
opacity: 0;
z-index: 2;
animation: all cubic-bezier(0.8, 0, 1, 0.3) $dur;
}
.splash:nth-child(2) {
height: 4px;
width: 4px;
top: 5px;
left: -10px;
}
}
.blob:nth-child(2) {
right: 0;
bottom: 0;
top: auto;
left: auto;
.splash {
top: 30px;
left: 20px;
}
.splash:nth-child(2) {
top: 5px;
left: 40px;
}
.splash:nth-child(3) {
top: 10px;
left: 30px;
}
}
.blob:nth-child(2).animated {
animation-name: blob-right-bottom;
.splash:nth-child(1).animated {
animation-name: splash-3;
}
.splash:nth-child(2).animated {
animation-name: splash-4;
}
.splash:nth-child(3).animated {
animation-name: splash-5;
}
}
.blob:nth-child(1).animated {
animation-name: blob-left-top;
.splash:nth-child(1).animated {
animation-name: splash-1;
}
.splash:nth-child(2).animated {
animation-name: splash-2;
}
}
.button.animated {
animation-name: button-grow;
}
var dur = 600;
var button = document.querySelector('.button')
var blobs = [].slice.call(document.querySelectorAll('.blob'));
var splash = [].slice.call(document.querySelectorAll('.splash'));
button.addEventListener('click', function() {
blobs.forEach(el => {
el.classList.add('animated');
setTimeout(function(){
el.classList.remove('animated');
}, dur);
})
splash.forEach(el => {
el.classList.add('animated');
setTimeout(function(){
el.classList.remove('animated');
}, dur);
})
button.classList.add('animated');
setTimeout(function(){
button.classList.remove('animated');
}, dur);
})