css实现拟物化点赞喜欢按钮点击数字滚动动画效果代码-html代码-BFW代码库

css实现拟物化点赞喜欢按钮点击数字滚动动画效果代码

代码语言：html

所属分类：其他

代码描述：css实现拟物化点赞喜欢按钮点击数字滚动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@font-face {
  font-family: "Mona Sans";
  src: url("//repo.bfw.wiki/bfwrepo/fonts/Mona-Sans.woff2") format("woff2 supports variations"), url("//repo.bfw.wiki/bfwrepo/fonts/Mona-Sans.woff2") format("woff2-variations");
  font-weight: 100 1000;
}
@layer properties {
  @property --nb-1-tsy {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --nb-2-tsy {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --nb-1-op {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --nb-2-op {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --ic-op {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --btn-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --ic-ts-x {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
}
* {
  -webkit-font-smoothing: antialiased;
}

:root {
  --ic-thumb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-thumbs-up'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
  /* COLORS */
  --eerie-black: hsla(0, 0%, 12%, 1);
  --night: hsla(0, 0%, 9%, 1);
  --black: hsla(0, 0%, 0%, 1);
  --battleship-gray: hsla(0, 0%, 55%, 0.8);
  /* ANIMATIONS VARS */
  --nb-1-tsy: 0;
  --nb-2-tsy: 100;
  --nb-1-op: 1;
  --nb-2-op: 0;
  --ic-op: 0.5;
  --ic-ts-x: 0;
  --btn-scale: 1;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: #0f0f0f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Mona Sans", sans-serif;
}

button {
  font-weight: bold;
  color: white;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to bottom, var(--eerie-black), var(--night));
  border: none;
  border-radius: 12px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 2px 6px black;
  cursor: pointer;
  transform: scale(var(--btn-scale));
  position: relative;
  overflow: hidden;
  will-change: transform;
  /* Transition the variables ! */
  transition: --nb-1-tsy 0.3s ease, --nb-2-tsy 0.3s ease, --nb-1-op 0.15s ease, --nb-2-op 0.15s ease, --ic-op 0.15s ease, --ic-ts-x 0.15s ease;
}
.........完整代码请登录后点击上方下载按钮下载查看