上传按钮悬停效果

下载代码

html

css

分享到微信朋友圈

html

css

.button {
  --background: #275EFE;
  --background-hover: #2456E8;
  --text: #fff;
  --icon: #fff;
  display: -webkit-box;
  display: flex;
  outline: none;
  cursor: pointer;
  border: 0;
  min-width: 113px;
  padding: 8px 20px 8px 12px;
  border-radius: 9px;
  line-height: 24px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  background: var(--b, var(--background));
  -webkit-transition: background .4s, -webkit-transform .3s;
  transition: background .4s, -webkit-transform .3s;
  transition: transform .3s, background .4s;
  transition: transform .3s, background .4s, -webkit-transform .3s;
  -webkit-transform: scale(var(--scale, 1)) translateZ(0);
          transform: scale(var(--scale, 1)) translateZ(0);
}
.button:active {
  --scale: .95;
}
.button:hover {
  --b: var(--background-hover);
}
.button .icon {
  --arrow-y: 0;
  --arrow-rotate: 45;
  width: 24px;
  height: 24px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-right: 8px;
  pointer-events: none;
}
.button .icon .arrow,
.button .icon .line {
  position: absolute;
}
.button .icon .arrow {
  left: 11px;
  top: 4px;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--icon);
  -webkit-transform: translateY(calc(var(--arrow-y) * 1px)) translateZ(0);
          transform: translateY(calc(var(--arrow-y) * 1px)) translateZ(0);
}
.button .icon .arrow:before, .button .icon .arrow:after {
  content: '';
  width: 2px;
  height: 7px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 1px;
  background: inherit;
  -webkit-transform-origin: 1px 1px;
          transform-origin: 1px 1px;
  -webkit-transform: rotate(var(--r, calc(var(--arrow-rotate) * -1deg)));
          transform: rotate(var(--r, calc(var(--arrow-rotate) * -1deg)));
}
.button .icon .arrow:after {
  --r: calc(var(--arrow-rotate) * 1deg);
}
.button .icon .line {
  width: 24px;
  height: 24px;
  display: block;
  left: 0;
  top: 7px;
  fill: none;
  stroke: var(--icon);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

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: #ECEFFC;
}

JavaScript

const $ = (s, o = document) => o.querySelector(s);
const $$ = (s, o = document) => o.querySelectorAll(s);

$$('.button').forEach(button => {

svgPath.y = 12;

timeline.to(icon, {
        '--arrow-y': 6,
        '--arrow-rotate': 70,
        ease: "elastic.in(1.1, .8)",
        duration: .7
    }).to(icon, {
        '--arrow-y': 0,
        '--arrow-rotate': 45,
        ease: "elastic.out(1.1, .8)",
        duration: .7
    });

timeline.to(svgPath, {
        y: 15,
        duration: .15
    }, .65).to(svgPath, {
        y: 12,
        ease: "elastic.out(1.2, .7)",
        duration: .6
    }, .8);

button.addEventListener('mouseover', e => {
        timeline.restart();
        interval = setInterval(() => timeline.restart(), 1500);
    });

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

});

function getPath(update, smoothing, pointsNew) {
    let points = pointsNew ? pointsNew : [
            [5, 12],
            [12, update],
            [19, 12]
        ],
        d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '');
    return `<path d="${d}" />`;
}

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