这是一款html5基于svg点击按钮碎片化消失过渡动画特效。
使用方法
在页面引入以下CSS样式
body { align-items: center; background: #c0e090; background: -webkit-linear-gradient(120deg, #c0e090, #F6D8E4); background: linear-gradient(120deg, #c0e090, #F6D8E4); display: flex; flex-direction: column; font-family: 'Nunito Sans', sans-serif; justify-content: center; height: 100vh; margin: 0; } .button { height: 60px; margin: 30px 0; position: relative; width: 200px; } .submit { align-items: center; background: #273439; border: 0; border-radius: 15px; cursor: pointer; color: #fff; display: flex; font-family: 'Nunito Sans', sans-serif; font-size: 20px; font-weight: 200; height: 60px; justify-content: center; position: absolute; transition: background 300ms, opacity 500ms 800ms; user-select: none; width: 200px; } .submit:hover { background: #0e232e; } svg { left: -200px; position: absolute; top: -60px; transform: scale(1); } path { fill:#0e232e; stroke:#0e232e; transform-origin: 50%; transition: transform 1200ms cubic-bezier(0.6, -0.48, 0.735, 0.045), fill 1200ms, stroke 1200ms; } .refresh { bottom: 10px; cursor: pointer; font-weight: 400; left: auto; position: absolute; right: 30px; top: auto; width: 50px; }