按钮点击动画

下载代码

html

css

js

分享到微信朋友圈

X

html

<nav class="menu">
    <a href="#" class="menu__item menu__item--yellow menu__item--active" data-background="e4a924">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Bounding_Boxes"> <g id="ui_x5F_spec_x5F_header_copy_2"> </g> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded_1_"> <g id="ui_x5F_spec_x5F_header_copy_6"> </g> <path d="M20,2H4C2.9,2,2.01,2.9,2.01,4L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M7,9h10c0.55,0,1,0.45,1,1v0 c0,0.55-0.45,1-1,1H7c-0.55,0-1-0.45-1-1v0C6,9.45,6.45,9,7,9z M13,14H7c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6 c0.55,0,1,0.45,1,1v0C14,13.55,13.55,14,13,14z M17,8H7C6.45,8,6,7.55,6,7v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0 C18,7.55,17.55,8,17,8z"/> </g> </svg>
    </a>
    <a href="#" class="menu__item menu__item--red" data-background="c92142">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Bounding_Boxes"> <g id="ui_x5F_spec_x5F_header_copy_2"> </g> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded"> <path d="M12,12c2.21,0,4-1.79,4-4s-1.79-4-4-4S8,5.79,8,8S9.79,12,12,12z M12,14c-2.67,0-8,1.34-8,4v1c0,0.55,0.45,1,1,1h14 c0.55,0,1-0.45,1-1v-1C20,15.34,14.67,14,12,14z"/> </g> </svg>   
    </a>
    <a href="#" class="menu__item menu__item--green" data-background="37b983">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Bounding_Boxes"> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded"> <path d="M12,8c-2.21,0-4,1.79-4,4s1.79,4,4,4s4-1.79,4-4S14.21,8,12,8z M20.94,11C20.48,6.83,17.17,3.52,13,3.06V2 c0-0.55-0.45-1-1-1h0c-0.55,0-1,0.45-1,1v1.06C6.83,3.52,3.52,6.83,3.06,11H2c-0.55,0-1,0.45-1,1v0c0,0.55,0.45,1,1,1h1.06 c0.46,4.17,3.77,7.48,7.94,7.94V22c0,0.55,0.45,1,1,1h0c0.55,0,1-0.45,1-1v-1.06c4.17-0.46,7.48-3.77,7.94-7.94H22 c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H20.94z M12,19c-3.87,0-7-3.13-7-7s3.13-7,7-7s7,3.13,7,7S15.87,19,12,19z"/> </g> </svg>
    </a>
    <a href="#" class="menu__item menu__item--purple" data-background="9f32b8">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Header_x2F_BG" display="none"> <rect x="-402" y="-314" display="inline" fill="#F1F1F2" width="520" height="520"/> </g> <g id="Bounding_Boxes"> <g id="ui_x5F_spec_x5F_header_copy_3" display="none"> </g> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded"> <g id="ui_x5F_spec_x5F_header_copy_5" display="none"> </g> <path d="M19.43,12.98c0.04-0.32,0.07-0.64,0.07-0.98s-0.03-0.66-0.07-0.98l2.11-1.65c0.19-0.15,0.24-0.42,0.12-0.64l-2-3.46 c-0.12-0.22-0.39-0.3-0.61-0.22l-2.49,1c-0.52-0.4-1.08-0.73-1.69-0.98l-0.38-2.65C14.46,2.18,14.25,2,14,2h-4 C9.75,2,9.54,2.18,9.51,2.42L9.13,5.07C8.52,5.32,7.96,5.66,7.44,6.05l-2.49-1c-0.23-0.09-0.49,0-0.61,0.22l-2,3.46 C2.21,8.95,2.27,9.22,2.46,9.37l2.11,1.65C4.53,11.34,4.5,11.67,4.5,12s0.03,0.66,0.07,0.98l-2.11,1.65 c-0.19,0.15-0.24,0.42-0.12,0.64l2,3.46c0.12,0.22,0.39,0.3,0.61,0.22l2.49-1c0.52,0.4,1.08,0.73,1.69,0.98l0.38,2.65 C9.54,21.82,9.75,22,10,22h4c0.25,0,0.46-0.18,0.49-0.42l0.38-2.65c0.61-0.25,1.17-0.59,1.69-0.98l2.49,1 c0.23,0.09,0.49,0,0.61-0.22l2-3.46c0.12-0.22,0.07-0.49-0.12-0.64L19.43,12.98z M12,15.5c-1.93,0-3.5-1.57-3.5-3.5 s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.93,15.5,12,15.5z"/> </g> <g id="Sharp" display="none"> <g id="ui_x5F_spec_x5F_header_copy_4"> </g> <path display="inline" d="M19.44,12.99l-0.01,0.02c0.04-0.33,0.08-0.67,0.08-1.01c0-0.34-0.03-0.66-0.07-0.99l0.01,0.02l2.44-1.92 l-2.43-4.22l-2.87,1.16l0.01,0.01c-0.52-0.4-1.09-0.74-1.71-1h0.01L14.44,2H9.57L9.13,5.07h0.01c-0.62,0.26-1.19,0.6-1.71,1 l0.01-0.01L4.56,4.89L2.12,9.11l2.44,1.92l0.01-0.02C4.53,11.34,4.5,11.66,4.5,12c0,0.34,0.03,0.68,0.08,1.01l-0.01-0.02l-2.1,1.65 c-0.19,0.15-0.33,0.26-0.33,0.26l2.43,4.2l2.88-1.15l-0.02-0.04c0.53,0.41,1.1,0.75,1.73,1.01H9.13L9.58,22h4.85 c0,0,0.03-0.18,0.06-0.42l0.38-2.65h-0.01c0.62-0.26,1.2-0.6,1.73-1.01l-0.02,0.04l2.88,1.15l2.43-4.2c0,0-0.14-0.12-0.33-0.26 L19.44,12.99z M12,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.93,15.5,12,15.5z"/> </g> <g id="Outline" display="none"> <g id="ui_x5F_spec_x5F_header"> </g> <g display="inline"> <path d="M19.43,12.98c0.04-0.32,0.07-0.64,0.07-0.98c0-0.34-0.03-0.66-0.07-0.98l2.11-1.65c0.19-0.15,0.24-0.42,0.12-0.64l-2-3.46 c-0.09-0.16-0.26-0.25-0.44-0.25c-0.06,0-0.12,0.01-0.17,0.03l-2.49,1c-0.52-0.4-1.08-0.73-1.69-0.98l-0.38-2.65 C14.46,2.18,14.25,2,14,2h-4C9.75,2,9.54,2.18,9.51,2.42L9.13,5.07C8.52,5.32,7.96,5.66,7.44,6.05l-2.49-1 C4.89,5.03,4.83,5.02,4.77,5.02c-0.17,0-0.34,0.09-0.43,0.25l-2,3.46C2.21,8.95,2.27,9.22,2.46,9.37l2.11,1.65 C4.53,11.34,4.5,11.67,4.5,12c0,0.33,0.03,0.66,0.07,0.98l-2.11,1.65c-0.19,0.15-0.24,0.42-0.12,0.64l2,3.46 c0.09,0.16,0.26,0.25,0.44,0.25c0.06,0,0.12-0.01,0.17-0.03l2.49-1c0.52,0.4,1.08,0.73,1.69,0.98l0.38,2.65 C9.54,21.82,9.75,22,10,22h4c0.25,0,0.46-0.18,0.49-0.42l0.38-2.65c0.61-0.25,1.17-0.59,1.69-0.98l2.49,1 c0.06,0.02,0.12,0.03,0.18,0.03c0.17,0,0.34-0.09,0.43-0.25l2-3.46c0.12-0.22,0.07-0.49-0.12-0.64L19.43,12.98z M17.45,11.27 c0.04,0.31,0.05,0.52,0.05,0.73c0,0.21-0.02,0.43-0.05,0.73l-0.14,1.13l0.89,0.7l1.08,0.84l-0.7,1.21l-1.27-0.51l-1.04-0.42 l-0.9,0.68c-0.43,0.32-0.84,0.56-1.25,0.73l-1.06,0.43l-0.16,1.13L12.7,20H11.3l-0.19-1.35l-0.16-1.13l-1.06-0.43 c-0.43-0.18-0.83-0.41-1.23-0.71l-0.91-0.7l-1.06,0.43l-1.27,0.51l-0.7-1.21l1.08-0.84l0.89-0.7l-0.14-1.13 C6.52,12.43,6.5,12.2,6.5,12s0.02-0.43,0.05-0.73l0.14-1.13L5.8,9.44L4.72,8.6l0.7-1.21l1.27,0.51l1.04,0.42l0.9-0.68 c0.43-0.32,0.84-0.56,1.25-0.73l1.06-0.43l0.16-1.13L11.3,4h1.39l0.19,1.35l0.16,1.13l1.06,0.43c0.43,0.18,0.83,0.41,1.23,0.71 l0.91,0.7l1.06-0.43l1.27-0.51l0.7,1.21L18.2,9.44l-0.89,0.7L17.45,11.27z"/> <path d="M12,8c-2.21,0-4,1.79-4,4s1.79,4,4,4s4-1.79,4-4S14.21,8,12,8z M12,14c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2 S13.1,14,12,14z"/> </g> </g> <g id="Duotone" display="none"> <g id="ui_x5F_spec_x5F_header_copy_2"> </g> <g display="inline"> <path opacity="0.3" d="M19.28,8.6l-0.7-1.21l-1.27,0.51l-1.06,0.43l-0.91-0.7c-0.39-0.3-0.8-0.54-1.23-0.71l-1.06-0.43l-0.16-1.13 L12.7,4H11.3l-0.19,1.35l-0.16,1.13L9.89,6.92C9.48,7.09,9.07,7.33,8.64,7.65l-0.9,0.68L6.69,7.91L5.42,7.39L4.72,8.6L5.8,9.44 l0.89,0.7l-0.14,1.13C6.52,11.57,6.5,11.8,6.5,12s0.02,0.43,0.05,0.73l0.14,1.13l-0.89,0.7L4.72,15.4l0.7,1.21l1.27-0.51 l1.06-0.43l0.91,0.7c0.39,0.3,0.8,0.54,1.23,0.71l1.06,0.43l0.16,1.13L11.3,20h1.39l0.19-1.35l0.16-1.13l1.06-0.43 c0.41-0.17,0.82-0.41,1.25-0.73l0.9-0.68l1.04,0.42l1.27,0.51l0.7-1.21l-1.08-0.84l-0.89-0.7l0.14-1.13 c0.04-0.31,0.05-0.52,0.05-0.73c0-0.21-0.02-0.43-0.05-0.73l-0.14-1.13l0.89-0.7L19.28,8.6z M12,16c-2.21,0-4-1.79-4-4s1.79-4,4-4 s4,1.79,4,4S14.21,16,12,16z"/> <path d="M19.43,12.98c0.04-0.32,0.07-0.64,0.07-0.98c0-0.34-0.03-0.66-0.07-0.98l2.11-1.65c0.19-0.15,0.24-0.42,0.12-0.64l-2-3.46 c-0.09-0.16-0.26-0.25-0.44-0.25c-0.06,0-0.12,0.01-0.17,0.03l-2.49,1c-0.52-0.4-1.08-0.73-1.69-0.98l-0.38-2.65 C14.46,2.18,14.25,2,14,2h-4C9.75,2,9.54,2.18,9.51,2.42L9.13,5.07C8.52,5.32,7.96,5.66,7.44,6.05l-2.49-1 C4.89,5.03,4.83,5.02,4.77,5.02c-0.17,0-0.34,0.09-0.43,0.25l-2,3.46C2.21,8.95,2.27,9.22,2.46,9.37l2.11,1.65 C4.53,11.34,4.5,11.67,4.5,12s0.03,0.66,0.07,0.98l-2.11,1.65c-0.19,0.15-0.24,0.42-0.12,0.64l2,3.46 c0.09,0.16,0.26,0.25,0.44,0.25c0.06,0,0.12-0.01,0.17-0.03l2.49-1c0.52,0.4,1.08,0.73,1.69,0.98l0.38,2.65 C9.54,21.82,9.75,22,10,22h4c0.25,0,0.46-0.18,0.49-0.42l0.38-2.65c0.61-0.25,1.17-0.59,1.69-0.98l2.49,1 c0.06,0.02,0.12,0.03,0.18,0.03c0.17,0,0.34-0.09,0.43-0.25l2-3.46c0.12-0.22,0.07-0.49-0.12-0.64L19.43,12.98z M17.45,11.27 c0.04,0.31,0.05,0.52,0.05,0.73c0,0.21-0.02,0.43-0.05,0.73l-0.14,1.13l0.89,0.7l1.08,0.84l-0.7,1.21l-1.27-0.51l-1.04-0.42 l-0.9,0.68c-0.43,0.32-0.84,0.56-1.25,0.73l-1.06,0.43l-0.16,1.13L12.7,20H11.3l-0.19-1.35l-0.16-1.13l-1.06-0.43 c-0.43-0.18-0.83-0.41-1.23-0.71l-0.91-0.7l-1.06,0.43l-1.27,0.51l-0.7-1.21l1.08-0.84l0.89-0.7l-0.14-1.13 C6.52,12.43,6.5,12.2,6.5,12s0.02-0.43,0.05-0.73l0.14-1.13L5.8,9.44L4.72,8.6l0.7-1.21l1.27,0.51l1.04,0.42l0.9-0.68 c0.43-0.32,0.84-0.56,1.25-0.73l1.06-0.43l0.16-1.13L11.3,4h1.39l0.19,1.35l0.16,1.13l1.06,0.43c0.43,0.18,0.83,0.41,1.23,0.71 l0.91,0.7l1.06-0.43l1.27-0.51l0.7,1.21L18.2,9.44l-0.89,0.7L17.45,11.27z"/> <path d="M12,8c-2.21,0-4,1.79-4,4s1.79,4,4,4s4-1.79,4-4S14.21,8,12,8z M12,14c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2 S13.1,14,12,14z"/> </g> </g> <g id="Material" display="none"> <g id="ui_x5F_spec_x5F_header_copy"> </g> <path display="inline" d="M19.43,12.98c0.04-0.32,0.07-0.64,0.07-0.98s-0.03-0.66-0.07-0.98l2.11-1.65 c0.19-0.15,0.24-0.42,0.12-0.64l-2-3.46c-0.12-0.22-0.39-0.3-0.61-0.22l-2.49,1c-0.52-0.4-1.08-0.73-1.69-0.98l-0.38-2.65 C14.46,2.18,14.25,2,14,2h-4C9.75,2,9.54,2.18,9.51,2.42L9.13,5.07C8.52,5.32,7.96,5.66,7.44,6.05l-2.49-1 c-0.23-0.09-0.49,0-0.61,0.22l-2,3.46C2.21,8.95,2.27,9.22,2.46,9.37l2.11,1.65C4.53,11.34,4.5,11.67,4.5,12s0.03,0.66,0.07,0.98 l-2.11,1.65c-0.19,0.15-0.24,0.42-0.12,0.64l2,3.46c0.12,0.22,0.39,0.3,0.61,0.22l2.49-1c0.52,0.4,1.08,0.73,1.69,0.98l0.38,2.65 C9.54,21.82,9.75,22,10,22h4c0.25,0,0.46-0.18,0.49-0.42l0.38-2.65c0.61-0.25,1.17-0.59,1.69-0.98l2.49,1 c0.23,0.09,0.49,0,0.61-0.22l2-3.46c0.12-0.22,0.07-0.49-0.12-0.64L19.43,12.98z M12,15.5c-1.93,0-3.5-1.57-3.5-3.5 s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.93,15.5,12,15.5z"/> </g> </svg>
    </a>
  </nav>

css

html {
  height: 100%;
  font-size: 1.3vw;
}

@media (min-width: 768px) {
  html {
    font-size: 62.5%;
  }
}

body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e4a924;
  transition: background-color 0.55s;
  will-change: background-color;
  margin: 0;
}

.menu__item {
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 12.5rem;
  background: #f3f3f3;
  display: inline-block;
  margin-left: 1.1rem;
  animation-name: close;
  animation-duration: 0s;
  will-change: width background-color;
  transition: background 0.55s;
  vertical-align: top;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 1px rgba(0,0,0, 0.1);
}

.menu__item:first-child {
  margin-left: 0;
}

.menu__item--animate {
  animation-duration: 0.5s;
}

.menu__item--active {
  width: 17rem;
  animation-name: open;
}

@keyframes open {
  0% {width: 8.5rem;}
  40% {width: 18.5rem;}
  80% {width: 17rem;}
  100% {width: 17rem;}
}

@keyframes close {
  0% {width: 17rem;}
  40% {width: 7rem;}
  80% {width: 8.5rem;}
  100% {width: 8.5rem;}
}

.menu__item--active.menu__item--yellow { background: #fabe2b; }
.menu__item--active.menu__item--red { background: #f43768; }
.menu__item--active.menu__item--green { background: #45e1a3; }
.menu__item--active.menu__item--purple { background: #c152da; }

.menu__item svg {
  fill: #a6a6a6;
  width: 4.5rem;
  height: 4.5rem;
  transtiion: fill 0.55s;
  will-change: fill;
}

.menu__item--active svg {
  fill: #fffdfe;
}

JavaScript

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>按钮点击动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号