按钮动画-按住以确认

下载代码

html

css

分享到微信朋友圈

html

css

.button-hold {
  --color: #F6F8FF;
  --background: #1A1E32;
  --icon: var(--color);
  --progress-border: #2B3044;
  --progress-active: #F6F8FF;
  --progress-success: #16BF78;
  --tick-stroke: var(--progress-active);
  --shadow: rgba(0, 9, 61, 0.2);
  --shadow-active: rgba(0, 9, 61, 0.32);
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  padding: 12px 32px;
  border: 0;
  border-radius: 24px;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .3s, -webkit-transform .3s;
  transition: transform .3s, box-shadow .3s;
  transition: transform .3s, box-shadow .3s, -webkit-transform .3s;
  box-shadow: 0 var(--shadow-y, 4px) var(--shadow-blur, 12px) var(--shadow);
  -webkit-transform: scale(var(--scale, 1));
          transform: scale(var(--scale, 1));
  color: var(--color);
  background: var(--background);
}
.button-hold > div {
  border-radius: 50%;
  top: 12px;
  left: 12px;
  position: absolute;
  background: var(--progress-border);
  transition: opacity .2s, -webkit-transform .3s;
  transition: transform .3s, opacity .2s;
  transition: transform .3s, opacity .2s, -webkit-transform .3s;
  opacity: var(--icon-o, 0);
  -webkit-transform: translateX(var(--icon-x, -4px));
          transform: translateX(var(--icon-x, -4px));
}
.button-hold > div:before {
  content: '';
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  z-index: 1;
  position: absolute;
  background: var(--background);
  border-radius: inherit;
  -webkit-transform: scale(var(--background-scale, 1));
          transform: scale(var(--background-scale, 1));
  transition: -webkit-transform .32s ease;
  transition: transform .32s ease;
  transition: transform .32s ease, -webkit-transform .32s ease;
}
.button-hold > div svg {
  display: block;
  fill: none;
  width: 20px;
  height: 20px;
}
.button-hold > div svg.progress {
  -webkit-transform: rotate(-90deg) scale(var(--progress-scale, 1));
          transform: rotate(-90deg) scale(var(--progress-scale, 1));
  transition: -webkit-transform .5s ease;
  transition: transform .5s ease;
  transition: transform .5s ease, -webkit-transform .5s ease;
}
.button-hold > div svg.progress circle {
  stroke-dashoffset: 1;
  stroke-dasharray: var(--progress-array, 0) 52;
  stroke-width: 16;
  stroke: var(--progress-active);
  transition: stroke-dasharray var(--duration) linear;
}
.button-hold > div svg.tick {
  left: 0;
  top: 0;
  position: absolute;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--tick-stroke);
  transition: stroke .3s ease .7s;
}
.button-hold > div svg.tick polyline {
  stroke-dasharray: 18 18 18;
  stroke-dashoffset: var(--tick-offset, 18);
  transition: stroke-dashoffset .4s ease .7s;
}
.button-hold ul {
  margin: 0;
  padding: 0;
  text-align: center;
  pointer-events: none;
  list-style: none;
  min-width: 52px;
  position: relative;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  -webkit-transform: translate3d(var(--ul-x, 0), 0, 0);
          transform: translate3d(var(--ul-x, 0), 0, 0);
}
.button-hold ul li {
  top: var(--t, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateY(var(--ul-y)) translateZ(0);
          transform: translateY(var(--ul-y)) translateZ(0);
  transition: opacity .2s ease .16s, -webkit-transform .3s ease .16s;
  transition: transform .3s ease .16s, opacity .2s ease .16s;
  transition: transform .3s ease .16s, opacity .2s ease .16s, -webkit-transform .3s ease .16s;
}
.button-hold ul li:not(:first-child) {
  --o: 0;
  position: absolute;
  left: 0;
  right: 0;
}
.button-hold ul li:nth-child(1) {
  opacity: var(--ul-o-1, 1);
}
.button-hold ul li:nth-child(2) {
  --t: 100%;
  opacity: var(--ul-o-2, 0);
}
.button-hold ul li:nth-child(3) {
  --t: 200%;
  opacity: var(--ul-o-3, 0);
}
.button-hold:focus:not(.process), .button-hold:hover:not(.process) {
  --shadow: var(--shadow-active);
  --shadow-y: 8px;
  --shadow-blur: 16px;
}
.button-hold:active:not(.success) {
  --scale: .96;
  --shadow-y: 4px;
  --shadow-blur: 8px;
}
.button-hold.process {
  --icon-x: 0;
  --ul-y: -100%;
  --ul-o-1: 0;
  --ul-o-2: 1;
  --ul-o-3: 0;
}
.button-hold.process, .button-hold.success {
  --ul-x: 8px;
  --icon-o: 1;
  --progress-array: 52;
}
.button-hold.success {
  --icon-x: 6px;
  --progress-border: none;
  --progress-scale: .11;
  --tick-stroke: var(--progress-success);
  --background-scale: 0;
  --tick-offset: 36;
  --ul-y: -200%;
  --ul-o-1: 0;
  --ul-o-2: 0;
  --ul-o-3: 1;
}
.button-hold.success > div svg.progress {
  -webkit-animation: tick .3s linear forwards .4s;
          animation: tick .3s linear forwards .4s;
}

@-webkit-keyframes tick {
  100% {
    -webkit-transform: rotate(-90deg) translate(0, -5px) scale(var(--progress-scale));
            transform: rotate(-90deg) translate(0, -5px) scale(var(--progress-scale));
  }
}

@keyframes tick {
  100% {
    -webkit-transform: rotate(-90deg) translate(0, -5px) scale(var(--progress-scale));
            transform: rotate(-90deg) translate(0, -5px) scale(var(--progress-scale));
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

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

body {
  min-height: 100vh;
  font-family: 'Roboto', Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #275EFE;
  font-family: 'Roboto', Arial, sans-serif;
}

JavaScript

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