超级可爱的点赞收藏交互动画效果-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap'>
<style>
  .paw-button {
  --background: #fff;
  --background-active: #FEE8F4;
  --border: #F1ECEB;
  --border-active: #EEC2DB;
  --text: #000;
  --number: #9C9496;
  --number-active: #000;
  --heart-background: #fff;
  --heart-background-active: #FEA5D7;
  --heart-border: #C3C2C0;
  --heart-border-active: #2B2926;
  --heart-shadow-light: #FEE0F2;
  --heart-shadow-dark: #EA5DAF;
  --paw-background: #fff;
  --paw-border: #201E1B;
  --paw-shadow: #EEEDED;
  --paw-inner: var(--heart-background-active);
  --paw-shadow-light: var(--heart-shadow-light);
  --paw-shadow-dark: var(--heart-shadow-dark);
  --paw-clap-background: #FEF0A5;
  --paw-clap-border: var(--paw-border);
  --paw-clap-shadow: #FED75C;
  --circle: #df3dce;
  --circle-line: #000;
  display: inline-flex;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  line-height: 19px;
  padding: 12px 16px;
}
.paw-button:before {
  content: '';
  position: absolute;
  display: block;
  left: -2px;
  top: -2px;
  bottom: -2px;
  right: -2px;
  z-index: 1;
  border-radius: 5px;
  transition: background .45s, border-color .45s;
  background: var(--background);
  border: 2px solid var(--border);
}
.paw-button svg {
  display: block;
}
.paw-button .text {
  position: relative;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: 3;
  margin-right: 8px;
  transition: width .25s;
  width: var(--w, 60px);
}
.paw-button .text span,
.paw-button .text svg {
  transition: opacity .2s, -webkit-transform .15s ease-out;
  transition: transform .15s ease-out, opacity .2s;
  transition: transform .15s ease-out, opacity .2s, -webkit-transform .15s ease-out;
  opacity: var(--o, 1);
}
.paw-button .text span {
  display: block;
  position: absolute;
  left: 30px;
  top: 0;
  -webkit-transform: translateY(var(--y, 0));
          transform: translateY(var(--y, 0));
  color: var(--text);
}
.paw-button .text svg {
  --background: var(--heart-background);
  --border: var(--heart-border);
  --shadow-light: transparent;
  --shadow-dark: transparent;
  width: 21px;
  height: 19px;
  -webkit-transform: translateX(var(--x));
          transform: translateX(var(--x));
}
.paw-button > span {
  display: block;
  position: relative;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: 2;
  color: var(--number);
}
.paw-button .paws {
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  z-index: 2;
}
.paw-button .paws svg {
  position: absolute;
  bottom: 0;
  transition: opacity .2s, -webkit-transform .3s ease-out;
  transition: transform .3s ease-out, opacity .2s;
  transition: transform .3s ease-out, opacity .2s, -webkit-transform .3s ease-out;
  opacity: var(--o, 0);
  -webkit-transform: translate(var(--x, 0), var(--y, 0));
          transform: translate(var(--x, 0), var(--y, 0));
}
.paw-button .paws svg.paw {
  --x: -24px;
  width: 30px;
  height: 37px;
  left: 32px;
}
.paw-button .paws svg.paw-clap {
  --x: 16px;
  --y: 34px;
  --o: 1;
  width: 29px;
  height: 34px;
  left: 34px;
}
.paw-button .paws .paw-effect {
  left: 26px;
  top: 12px;
  width: 44px;
  height: 44px;
  position: absolute;
}
.paw-button .paws .paw-effect:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--circle);
  -webkit-transform: scale(var(--s, 0));
          transform: scale(var(--s, 0));
  opacity: var(--o, 1);
  transition: opacity .2s linear .25s, -webkit-transform .15s ease .16s;
  transition: transform .15s ease .16s, opacity .2s linear .25s;
  transition: transform .15s ease .16s, opacity .2s linear .25s, -webkit-transform .15s ease .16s;
}
.paw-button .paws .paw-effect div {
  width: 2px;
  height: 6px;
  border-radius: 1px;
  left: 50%;
  bottom: 50%;
  margin-left: -1px;
  position: absolute;
  background: var(--circle-line);
  -webkit-transform: translateY(-24px) scaleX(0.7) scaleY(var(--s, 0));
          transform: translateY(-24px) scaleX(0.7) scaleY(var(--s, 0));
}
.paw-button .paws .paw-effect div:before, .paw-button .paws .paw-effect div:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  -webkit-transform: translate(var(--x, -22px), var(--y, 4px)) rotate(var(--r, -45deg)) scaleX(0.8) scaleY(var(--s, 0));
          transform: translate(var(--x, -22px), var(--y, 4px)) rotate(var(--r, -45deg)) scaleX(0.8) scaleY(var(--s, 0));
}
.paw-button .paws .paw-effect div:after {
  --x: 22px;
  --r: 45deg;
}
.paw-button .paws .paw-effect div,
.paw-button .paws .paw-effect div:before,
.paw-button .paws .paw-effect div:after {
  opacity: var(--o, 1);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  transition: opacity .18s linear .21s, -webkit-transform .12s ease .17s;
  transition: transform .12s ease .17s, opacity .18s linear .21s;
  transition: transform .12s ease .17s, opacity .18s linear .21s, -webkit-transform .12s ease .17s;
}
.paw-button i {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  top: 50%;
  left: 50%;
  margin: -2px 0 0 -2px;
  opacity: var(--o, 0);
  background: var(--b);
  -webkit-transform: translate(var(--x), var(--y)) scale(var(--s, 1));
          transform: translate(var(--x), var(--y)) scale(var(--s, 1));
}
.paw-button:not(.confetti):hover .text {
  --o: 0;
  --x: 12px;
  --y: 8px;
}
.paw-button:not(.confetti):hover .paws svg.paw {
  --o: 1;
  --x: 0;
}
.paw-button.animation .text {
  --o: 0;
}
.paw-button.animation .text svg {
  --background: var(--heart-background-active);
  --border: var(--heart-border-active);
  --shadow-light: var(--heart-shadow-light);
  --shadow-dark: var(--heart-shadow-dark);
}
.paw-button.animation .paws svg.paw {
  --x: 0;
  --o: 1;
  transition-delay: 0s;
  -webkit-animation: paw .45s ease forwards;
          animation: paw .45s ease forwards;
}
.paw-button.animation .paws svg.paw-clap {
  -webkit-animation: paw-clap .5s ease-in forwards;
          animation: paw-clap .5s ease-in forwards;
}
.paw-button.animation .paws .paw-effect {
  --s: 1;
  --o: 0;
}
.paw-button.confetti i {
  -webkit-animation: confetti .6s ease-out forwards;
          animation: confetti .6s ease-out forwards;
}
.paw-button.confetti .paws svg.paw {
  --o: 0;
  transition: opacity .15s linear .2s;
}
.paw-button.liked {
  --background: var(--background-active);
  --border: var(--border-active);
}
.paw-button.liked .text {
  --w: 21px;
}
.paw-button.liked .text svg {
  --o: 1;
}
.paw-button.liked > span {
  --number: var(--number-active);
}

@-webkit-keyframes confetti {
  from {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes confetti {
  from {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes paw {
  0% {
    -webkit-transform: translateX(var(--x));
            transform: translateX(var(--x));
  }
  35% {
    -webkit-transform: translateX(-16px);
            transform: translateX(-16px);
  }
  55%,
    70% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-12px);
            transform: translateX(-12px);
  }
}
@keyframes paw {
  0% {
    -webkit-transform: translateX(var(--x));
            transform: translateX(var(--x));
  }
  35% {
    -webkit-transform: translateX(-16px);
            transform: translateX(-16px);
  }
  55%,
    70% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-12px);
            transform: translateX(-12px);
  }
}
@-webkit-keyframes paw-clap {
  50%,
    70% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes paw-clap {
  50%,
    70% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

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

body {
  min-height: 100vh;
  display: flex;
  font-family: 'Roboto', Arial;
  justify-content: center;
  align-items: center;
  background: #fff;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
</style>

</head>
<body translate="no">
<a href="" class="paw-button">
<div class="text">
<svg>
<use xlink:href="#heart">
</svg>
<span>Like</span>
</div>
<span>12</span>
<div class="paws">
<svg class="paw">
<use xlink:href="#paw">
</svg>
<div class="paw-effect">
<div></div>
</div>
<svg class="paw-clap">
<use xlink:href="#paw-clap">
</svg>
</div>
</a>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 19" id="heart">
<path d="M10.7146252,2.79863032 C12.7012563,0.931232655 14.9323041,0.436636741 17.303155,1.3849771 C20.1742369,2.53340984 21.379939,5.46245395 20.2209696,8.35987762 C19.6094364,9.88871051 17.374953,12.5020804 13.4593886,16.3167815 L12.4216841,17.3182725 C11.3603119,18.3334838 9.68851069,18.3354777 8.62471989,17.322801 L7.91413528,16.6420566 C3.86646758,12.738617 1.52252172,10.0157042 0.832966246,8.37137962 C-0.41863058,5.38680258 0.803066105,2.56217827 3.74606902,1.3849771 C5.99801057,0.484200479 8.20491678,0.982789394 10.280801,2.80379411 L10.5027119,3.00395851 L10.7146252,2.79863032 Z" fill="var(--border)"></path>
<path d="M16.746069,2.77769213 C14.6991759,1.9589349 12.8646007,2.52341959 11.0917453,4.57210939 L10.5493822,5.19885746 L9.97978137,4.59675633 C8.07203164,2.58015418 6.22092676,2.01058345 4.30315504,2.77769213 C2.13116413,3.6464885 1.29186971,5.5869795 2.21625782,7.79128961 C2.80060177,9.18472518 5.06951474,11.8148892 8.97366525,15.5798429 L9.65895765,16.2363608 C10.142501,16.6966703 10.9024138,16.695764 11.3840599,16.2350667 L12.3934356,15.260969 L13.3524601,14.3169524 C16.5267562,11.1578139 18.3665388,8.9570809 18.8282545,7.80279161 C19.6830863,5.66571221 18.8388588,3.61480804 16.746069,2.77769213 Z" fill="var(--background)"></path>
<path d="M11.2640718,4.39338901 L11.1990259,4.45003381 C12.9386445,2.50122541 14.7404343,1.97543825 16.746069,2.77769213 C18.8388588,3.61480804 19.6830863,5.66571221 18.8282545,7.80279161 C18.3963269,8.88261062 17.6718097,9.565648 18.0773108,8.55189509 C18.9321426,6.41481569 18.0879151,4.36391153 15.9951253,3.52679561 C14.3011449,2.84920342 12.7525807,3.11899214 11.2640718,4.39338901 L11.1990259,4.45003381 L11.2640718,4.39338901 Z" fill="var(--shadow-light)"></path>
<path d="M4.30315504,2.77769213 C5.1840079,2.42535099 6.05079631,2.35500405 6.91546905,2.57734431 C6.71200283,2.6290933 6.50795909,2.69577051 6.30315504,2.77769213 C4.13116413,3.6464885 3.29186971,5.5869795 4.21625782,7.79128961 C4.80060177,9.18472518 7.06951474,11.8148892 10.9736653,15.5798429 L11.5197324,16.1027938 L11.3840599,16.2350667 C10.9368171,16.6628571 10.2496402,16.694195 9.76660209,16.3279397 L9.65895765,16.2363608 L8.97366525,15.5798429 L8.30168234,14.9272399 C4.80841276,11.5097375 2.7662286,9.10275838 2.21625782,7.79128961 C1.29186971,5.5869795 2.13116413,3.6464885 4.30315504,2.77769213 Z" fill="var(--shadow-dark)"></path>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 37" id="paw">
<path d="M29.5,13.1428571 C29.5,10.2731801 27.9339013,8.22572388 24.9356506,7.09074873 C24.5060635,4.10962466 23.2255501,2.04210672 21.0854102,0.97203675 C18.9713961,-0.0849702928 16.8221988,0.0215138899 14.726671,1.27088412 C12.9760568,0.361959777 11.0555026,0.250453528 9.01282918,0.931344669 C6.80047326,1.66879664 5.34226875,3.75843749 4.59894815,7.09619125 C1.88946192,8.25783275 0.5,10.4828381 0.5,13.6428571 C0.5,16.7274666 1.50305875,19.3423638 3.5,21.4476618 L3.5,37 L5,37 L26,37 L26,21.4218665 C28.3223642,18.6969403 29.5,15.9336988 29.5,13.1428571 Z" fill="var(--paw-background)"></path>
<path d="M12.5510071,2.08359581 L12.3699777,2.11684999 C12.080837,2.17532308 11.7866606,2.25446 11.4871708,2.35428994 C9.84726969,2.90092365 8.68967842,4.56898134 8.05392526,7.46323001 L7.98543551,7.78986457 L7.90367876,8.19864828 L7.51334258,8.34502435 C5.14457644,9.23331165 4,10.9501763 4,13.6427775 C4,16.3251292 4.84482735,18.5538216 6.54341216,20.3676718 L6.78033009,20.6124474 L7,20.8321173 L7,37 L5,37 L5,20.8321173 L4.78033009,20.6124474 C2.92337534,18.7554926 2,16.4470543 2,13.6427775 C2,10.9501763 3.14457644,9.23331165 5.51334258,8.34502435 L5.90367876,8.19864828 L5.98543551,7.78986457 C6.60459253,4.69407947 7.78653261,2.92116934 9.48717082,2.35428994 C10.5739986,1.99201401 11.5908529,1.90224716 12.5510071,2.08359581 Z" fill="var(--paw-shadow)"></path>
<path d="M14.726671,1.27088412 C16.8221988,0.0215138899 18.9713961,-0.0849702928 21.0854102,0.97203675 C23.2255501,2.04210672 24.5060635,4.10962466 24.9356506,7.09074873 C27.9339013,8.22572388 29.5,10.2731801 29.5,13.1428571 C29.5,15.9336988 28.3223642,18.6969403 26,21.4218665 L26,21.4218665 L26,37 L24.5,37 L24.5,20.8610558 L24.9573772,20.3318354 C26.9962284,17.9020144 28,15.5090865 28,13.1428571 C28,10.8190336 26.722442,9.2575739 24.0128292,8.35436962 L24.0128292,8.35436962 L23.5575804,8.20262004 L23.5045872,7.72568079 C23.1972701,4.95982682 22.1638979,3.18833157 20.4145898,2.31367754 C18.6608767,1.43682096 16.9468873,1.57965341 15.1660251,2.76689486 L15.1660251,2.........完整代码请登录后点击上方下载按钮下载查看
超级可爱的点赞收藏交互动画效果

网友评论0

open-props实现简洁登录表单效果代码

css实现代办事项列表勾选划掉打钩横线动画效果代码

css实现炫酷聚焦placeholder上浮输入框动画效果代码

div+css实现大气科技风格边框光线流动登录注册表单代码

div+css实现创意单选按钮打钩打叉动画效果代码

js+css+svg实现实时显示个性签名字体效果的输入框代码

jquery+css实现checkbox和radio单选开关多选美化效果代码

css+div实现简洁灵感表单卡片效果代码

css实现checkbox多选框美化效果代码

css实现input输入框placeholder上浮动画效果代码
