按钮上传动画

下载代码

html

css

分享到微信朋友圈

html

css

.publish-button {
  --color: #fff;
  --icon-color: #fff;
  --background-default: #0376FF;
  --text-normal-o: 1;
  --text-normal-y: 0px;
  --text-progress-o: 0;
  --text-progress-y: -8px;
  --text-done-o: 0;
  --text-done-y: -8px;
  --icon-arrow-offset: 0px;
  --icon-arrow-y: 0px;
  --icon-cloud-y: 0px;
  --icon-tick-offset: 11px;
  --icon-line-offset: 21px;
  --icon-circle-scale: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  border: none;
  background: none;
  padding: 10px 20px 10px 12px;
  border-radius: 9px;
  overflow: hidden;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  cursor: pointer;
  position: relative;
  color: var(--color);
  background: var(--background, var(--background-default));
}
.publish-button .icon {
  width: 20px;
  height: 20px;
  pointer-events: none;
  position: relative;
  margin-right: 8px;
}
.publish-button .icon:before {
  content: '';
  position: absolute;
  left: 1px;
  top: 1px;
  right: 1px;
  bottom: 1px;
  opacity: .25;
  border-radius: 50%;
  background: var(--icon-color);
  -webkit-transform: scale(var(--icon-circle-scale)) translateZ(0);
          transform: scale(var(--icon-circle-scale)) translateZ(0);
}
.publish-button .icon svg {
  display: block;
  width: 20px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
}
.publish-button .icon svg.cloud {
  fill: var(--icon-color);
  fill-opacity: .25;
  -webkit-transform: translateY(var(--icon-cloud-y)) translateZ(0);
          transform: translateY(var(--icon-cloud-y)) translateZ(0);
}
.publish-button .icon svg:not(.cloud) {
  fill: none;
  stroke: var(--icon-color);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.publish-button .icon svg:not(.cloud) path.line, .publish-button .icon svg:not(.cloud) path.arrow {
  -webkit-transform: translateY(var(--icon-arrow-y)) translateZ(0);
          transform: translateY(var(--icon-arrow-y)) translateZ(0);
}
.publish-button .icon svg:not(.cloud) path.line {
  stroke-dasharray: 13px;
  stroke-dashoffset: var(--icon-line-offset);
}
.publish-button .icon svg:not(.cloud) path.arrow {
  stroke-dasharray: 4px;
  stroke-dashoffset: var(--icon-arrow-offset);
}
.publish-button .icon svg:not(.cloud) path.tick {
  stroke-dasharray: 11px;
  stroke-dashoffset: var(--icon-tick-offset);
}
.publish-button .text {
  position: relative;
}
.publish-button .text span {
  display: block;
  opacity: var(--o, var(--text-normal-o));
  -webkit-transform: translateY(var(--y, var(--text-normal-y))) translateZ(0);
          transform: translateY(var(--y, var(--text-normal-y))) translateZ(0);
}
.publish-button .text span:not(.normal) {
  position: absolute;
  left: 0;
  top: 0;
}
.publish-button .text span.progress {
  --o: var(--text-progress-o);
  --y: var(--text-progress-y);
}
.publish-button .text span.done {
  --o: var(--text-done-o);
  --y: var(--text-done-y);
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  font-family: 'Inter', Arial;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  background: #1f1f1f;
}

JavaScript

const { set, to, fromTo } = gsap

const loadingTime = 5000
const resetTime = 5000

document.querySelectorAll('.publish-button').forEach(button => {
    let tweenHover = to(button, {
        paused: true,
        keyframes: [{
            '--icon-arrow-y': '-2px',
            '--icon-line-offset': '23px',
            duration: .15
        }, {
            '--icon-arrow-y': '0px',
            '--icon-line-offset': '21px',
            duration: .3
        }]
    }),
    interval;

button.addEventListener('pointerenter', e => {
        if(button.classList.contains('animated')) {
            return
        }
        tweenHover.restart()
        interval = setInterval(() => tweenHover.restart(), 1000)
    });

button.addEventListener('pointerleave', e => clearInterval(interval))

button.addEventListener('click', e => {
        e.preventDefault()

if(button.classList.contains('animated')) {
            return
        }
        button.classList.add('animated')

let text = button.querySelector('.text'),
            normal = text.querySelector('.normal'),
            progress = text.querySelector('.progress'),
            done = text.querySelector('.done'),
            normalWidth = normal.offsetWidth

clearInterval(interval)
        tweenHover.pause()

let cloud = button.querySelector('.cloud'),
            cloudInterval,
            clone = cloud.cloneNode(true)

gsap.to(button, {
            '--icon-cloud-y': '32px',
            duration: .15
        })

cloudInterval = setInterval(() => {
            createCloud(clone, button.querySelector('.icon'))
        }, 400)

let tweenArrow = fromTo(button, {
            '--icon-arrow-y': '0px',
            '--icon-line-offset': '21px',
            duration: .15
        }, {
            repeat: -1,
            keyframes: [{
                '--icon-arrow-y': '-6px',
                '--icon-line-offset': '24px',
                duration: .6,
            }, {
                '--icon-arrow-y': '0px',
                '--icon-line-offset': '21px',
                duration: .85,
                ease: 'power2.out'
            }]
        })

to(button, {
            onStart() {
                to(text, {
                    width: progress.offsetWidth,
                    duration: .15
                })
            },
            '--text-normal-o': 0,
            '--text-normal-y': '8px',
            duration: .25
        })

to(button, {
            '--text-progress-o': 1,
            '--text-progress-y': '0px',
            duration: .3,
            delay: .1
        })

setTimeout(() => {
            tweenArrow.pause()
            clearInterval(cloudInterval)
            to(button, {
                onStart() {
                    to(text, {
                        width: done.offsetWidth,
                        duration: .15
                    })
                },
                '--text-progress-o': 0,
                '--text-progress-y': '8px',
                duration: .25
            })
            to(button, {
                duration: .25,
                keyframes: [{
                    '--icon-line-offset': '13px'
                }, {
                    '--icon-arrow-offset': '4px'
                }]
            })
            to(button, {
                '--text-done-o': 1,
                '--text-done-y': '0px',
                duration: .3,
                delay: .1
            })
            to(button, {
                '--icon-tick-offset': '0px',
                duration: .25,
                delay: .3
            })
            to(button, {
                '--icon-circle-scale': 1,
                duration: .7,
                delay: .2,
                ease: 'elastic.out(1, .75)'
            })
            setTimeout(() => {
                reset(button, normalWidth, text)
            }, resetTime)
        }, loadingTime)
    })
})

function createCloud(node, parent) {
    let elem = node.cloneNode(true)
    parent.appendChild(elem)
    set(elem, {
        x: gsap.utils.random(-8, 8),
        y: -36
    })
    to(elem, {
        y: 36,
        duration: gsap.utils.random(.4, 1.5),
        onComplete() {
            elem.remove()
        }
    })
}

function reset(button, normalWidth, text) {
    to(button, {
        onStart() {
            to(text, {
                width: normalWidth,
                duration: .15,
                clearProps: true
            })
        },
        '--text-done-o': 0,
        '--text-done-y': '8px',
        duration: .25
    })
    fromTo(button, {
        '--text-normal-y': '-8px'
    }, {
        '--text-normal-o': 1,
        '--text-normal-y': '0px',
        duration: .3,
        delay: .1
    })
    to(button, {
        keyframes: [{
            '--icon-tick-offset': '11px',
            '--icon-circle-scale': 0,
            '--icon-arrow-y': '0px',
            duration: .2
        }, {
            '--icon-cloud-y': '0px',
            '--icon-line-offset': '21px',
            duration: .2
        }, {
            '--icon-arrow-offset': '0px',
            duration: .15
        }],
        clearProps: true,
        onComplete() {
            button.classList.remove('animated')
        }
    })
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg