svg+js实现按钮点击人类大脑扩散成宇宙效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：svg+js实现按钮点击人类大脑扩散成宇宙效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900'>
  
<style>
:root {
  --c1: #7400b8;
  --c2: #48bfe3;
  --c3: #80ffdb;
  --size: 100px;
}

body,
html {
  color: white;
  background: #333844;
  padding: 0;
  display: grid;
  place-items: center;
  height: 100%;
}

button {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
  font-size: 3em;
  background: rgba(0, 0, 0, 0.25);
  color: white;
  border: none;
  width: calc(var(--size) * 3);
  height: var(--size);
  border-radius: var(--size);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-inline: 3em;
  transition: all 0.2s ease;
}

button em {
  transform: scale(0.95);
}

button.press {
  -webkit-animation: jello-horizontal 0.66s both;
          animation: jello-horizontal 0.66s both;
}

button:hover {
  box-shadow: 0 0 20px var(--c1);
}

button:hover em {
  transform: scale(1.05);
}

svg {
  color: white;
  max-height: 100%;
  fill: currentColor;
}

.cls-3 {
  stroke: black;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 30;
}

#brain-sharp {
  fill: #fcdfef;
  filter: drop-shadow(0 0 8px #fcdfef);
}

#brain-sharp .cls-3 {
  stroke-width: 5;
}

#brain-nodes .brain {
  fill: #baa5cd;
  filter: drop-shadow(0 0 17px var(--c2));
}

#brain-nodes .brain path:not(.cls-4) {
  opacity: 0.25;
  fill: white;
  stroke: white;
}

#brain-nodes .nodes {
  stroke: white;
  fill: var(--c2);
  stroke-width: 10;
  transform: scale(0.85);
  filter: drop-shadow(0 0 7px var(--c2));
}

#brain-circuits {
  filter: drop-shadow(0 0 15px #a1d4cc);
}

#brain-circuits .brain {
  fill: #a1d4cc;
}

#brain-circuits .brain path:not(.cls-4) {
  opacity: 0;
}

#brain-circuits .circuits {
  fill: white;
  stroke-width: 2;
  transform: scale(1.3);
  z-index: 2;
  filter: drop-shadow(0 0 15px var(--c2));
}

#brain-galaxy {
  filter: drop-shadow(0 0 20px #f3c4ff);
  border: #f3c4ff;
}

#brain-galaxy .brain {
  fill: url(#gimg);
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 8;
}

#brain-galaxy .brain path:not(.cls-4) {
  opacity: 0;
}

#brain-galaxy .galaxy {
  fill: white;
  transform: scale(1.1);
  z-index: 2;
  filter: drop-shadow(0 0 55px #f3c4ff);
  mix-blend-mode: color-dodge;
}

#brain-galaxy-mask {
  fill: url(#galaxy-gradient);
}

#brain-galaxy .galaxy .cls-3 {
  stroke: url(#galaxy-gradient);
  filter: drop-shadow(0 0 30px var(--c2));
  mix-blend-mode: hard-light;
}

#brain-galaxy .galaxy .cls-4 {
  fill: var(--c1);
  filter: drop-shadow(0 0 30px var(--c1));
}

#brain-galaxy .galaxy .cls-5 {
  fill: var(--c3);
  filter: drop-shadow(0 0 30px var(--c3));
}

#expander {
  position: relative;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
}

#expander > * {
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
}

#expainder .brains {
  display: grid;
}

#expander * {
  grid-column: 1;
  grid-row: 1;
}

#head {
  fill: rgba(255, 255, 255, 0.6);
  transform: scale(0.9) rotate(-5deg);
  transition: all 1s cubic-bezier(0.7, -0.56, 0.04, 1.07);
}

#expander .brains > *:not(#head) {
  opacity: 0;
  width: 100%;
  height: 100%;
  display: grid;
}

.brains,
.brains * {
  position: relative;
  transition: all 0.5s ease;
  transition: all 1s cubic-bezier(0.7, -0.56, 0.04, 1.07);
}

.brains {
  transform: translateX(7.5%) translateY(-20%) scale(0.25);
}

#expander.lvl1 .brains #brain-smooth {
  opacity: 1 !important;
}

#expander.lvl2 .brains {
  transform: translateX(7.5%) translateY(-20%) scale(0.4);
}

#expander.lvl2 .brains #brain-sharp {
  opacity: 1 !important;
}

#expander.lvl3 .brains {
  transform: translateX(7.5%) translateY(-18%) scale(0.75);
}

#expander.lvl3 .brains #brain-nodes {
  opacity: 1 !important;
}

#expander.lvl3 #head {
  fill: var(--c2);
  transform: scale(1) rotate(-2deg);
}

#expander.lvl4 .brains {
  transform: translateX(7.5%) translateY(-18%) scale(1) rotate(5deg);
}

#expander.lvl4 .brains #brain-circuits {
  opacity: 1 !important;
  -webkit-animation: vibrate-1 0.4s linear infinite both;
          animation: vibrate-1 0.4s linear infinite both;
}

#expander.lvl4 #head {
  fill: var(--c3);
  transform: scale(1.3) rotate(3deg);
  filter: drop-shadow(0 0 10px var(--c3)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
}

#expander.lvl5 .brains {
  transform: translateX(7.5%) translateY(-25%) scale(1.5);
}

#expander.lvl5 .brains #brain-galaxy {
  opacity: 1 !important;
  -webkit-animation: vibrate-1 0.28s linear infinite both;
          animation: vibrate-1 0.28s linear infinite both;
}

#expander.lvl5 #head {
  fill: var(--c1);
  transform: scale(1.6) rotate(9deg);
  filter: drop-shadow(0 0 14px var(--c1)) drop-shadow(0 0 8px var(--c1)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* ----------------------------------------------
 * Generated by Animista on 2023-3-23 16:13:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2023-3-23 19:2:3
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
@-webkit-keyframes vibrate-1 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}
.social-icon {
  stroke-width: 1.25;
  stroke: cyan;
  fill: transparent;
  background: transparent;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  z-index: 10;
  -webkit-animation: iconsLoad 10s ease both 1s;
          animation: iconsLoad 10s ease both 1s;
}

.social-icon path {
  fill: none;
}

.social-icon.twitter {
  right: 40px;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes iconsLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes iconsLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>


  
</head>

<body >
  <main id=app>
  <link rel="preload" as="image" href="https://assets.codepen.io/13471/ZZ109.jpg" />
  <button>

    <span id="expander" class="lvl1">

      <svg id="head" viewBox="0 0 1033.7 1222.31">
        <path d="m363.11,1222.31c-2.68,0-5.32-.82-7.55-2.39-30.15-21.21-30.5-76.19-30.87-134.4-.26-41.64-.56-88.84-14.83-104.99-15.33-17.34-32.79-20.89-54.3-20.89-9.04,0-18.86.67-29.25,1.37-10.56.72-21.48,1.46-33.26,1.66-1.27.02-2.55.03-3.78.03h-.03c-37.16,0-63.59-9.23-80.81-28.23-27.88-30.76-23.19-78.4-19.05-120.44,3.25-33,6.32-64.17-8.82-70.25-3.26-1.32-4.5-1.56-8.19-2.25-1.29-.24-2.76-.52-4.51-.88-39.92-8.14-60.34-19.74-66.19-37.6-7.88-24.06,13.48-47.59,40.5-77.37,15.73-17.33,33.55-36.97,46.71-58.29,12.4-20.06,12.07-54.48,11.7-94.34-.92-98.44-2.32-247.2,184.1-381.26C367.01,32.59,473.23,0,583.76,0c132.01,0,254.31,47.53,335.55,130.4,81.75,83.36,120.99,188.76,113.48,304.81-7.05,108.95-56.07,217.97-138.04,306.99-35.32,38.39-33.52,113.74-31.61,193.5,1.37,57.38,2.8,116.71-10.42,165.1-1.27,4.65-4.98,8.22-9.67,9.32l-476.95,111.83c-.99.23-2,.35-3,.35Zm-107.55-288.92c23.57,0,50.79,3.54,73.97,29.76,20.77,23.54,21.08,71.46,21.4,122.21.28,43.27.59,91.89,15.8,109.5l462.56-108.46c10.16-43.51,8.86-97.63,7.6-150.06-2.04-85.22-3.97-165.71,38.54-211.91,165.45-179.69,176.01-421.78,25.13-575.64-76.34-77.87-191.81-122.53-316.81-122.53-105.08,0-205.85,30.84-283.76,86.84C124.63,239.2,125.89,374.21,126.82,472.79c.41,43.93.77,81.87-15.62,108.38-14.42,23.37-33.11,43.97-49.6,62.14-17.87,19.69-38.13,42.01-35,51.57.87,2.66,6.8,11.95,46.51,20.05,1.61.33,2.94.58,4.11.8,4.2.79,7.52,1.41,13.16,3.7,33.38,13.39,29.18,55.98,25.12,97.17-3.61,36.61-7.69,78.1,12.37,100.24,11.96,13.2,32.04,19.61,61.37,19.61.95-.15,2.24-.01,3.38-.03,11.11-.19,21.69-.91,31.92-1.6,10.85-.74,21.1-1.43,31.03-1.43Z" />
      </svg>

      <div class="brains">

        <svg id="brain-smooth" viewBox="0 0 1009.99 952.03">
          <g>
            <g>
              <path class="cls-4" d="m761.73,754.46c29.01.31,55.08-4.5,77.58-17.63,22.49-13.13,41.41-34.59,53.08-56.66,11.67-22.07,16.08-44.76,15.76-58.86-.31-14.1-5.36-19.62,5.36-24.53,10.72-4.9,37.21-9.2,56.45-32.8,19.23-23.6,31.22-66.53,31.85-99.02.63-32.5-10.09-54.57-19.87-68.06-9.77-13.49-18.6-18.39-18.54-29.25.07-10.85,8.77-27.16,7.82-46.16-.95-19.01-11.67-40.47-26.8-52.09-15.14-11.62-35.95-13.52-46.98-26.09-11.04-12.57-12.93-35.87-24.6-57.94-11.67-22.07-33.11-42.92-55.5-54.57-22.39-11.65-45.72-14.11-64.96-24.83-19.24-10.73-34.37-29.74-51.39-37.98-17.02-8.23-34.7-5.86-51.72-14.45-17.03-8.58-32.8-28.2-56.45-38.01-23.65-9.81-55.18-9.81-79.62-.18-24.44,9.64-42.41,29.61-64.18,30.52-21.76.92-47.62-16.86-80.41-17.47-32.79-.61-72.53,15.94-97.76,31.88-25.23,15.94-35.95,31.27-46.35,35.56-10.41,4.29-20.5-2.45-38.47-4.29-17.97-1.84-43.83,1.23-60.23,20.85-16.4,19.62-23.34,55.79-35.32,73.27-11.98,17.47-29.01,16.25-43.83,24.52-14.82,8.28-27.44,26.06-28.07,45.07-.63,19.01,10.72,39.24,11.98,54.26,1.27,15.02-7.57,24.83-13.88,48.13-6.31,23.3-10.09,60.09-7.88,85.53,2.21,25.45,10.41,39.55,29.65,56.72,19.23,17.17,49.51,37.4,86.09,43.23,36.58,5.82,79.47-2.76,99.34-5.21,19.87-2.45,16.71,1.23,11.98,21.46-4.73,20.24-11.03,57.02,1.58,87.37,12.61,30.35,44.15,54.26,83.25,62.84,39.1,8.59,85.77,1.84,112.58-6.44,26.8-8.28,33.74-18.09,47.62-20.85,13.88-2.76,34.69,1.54,54.55-1.84,19.87-3.38,38.79-14.41,48.25-23.3,9.46-8.89,9.46-15.64,15.14-10.73,5.68,4.9,17.03,21.46,29.64,39.55,12.62,18.09,26.49,37.71,49.41,50.23,22.92,12.52,54.87,17.93,83.88,18.24h0Z" />
              <path class="cls-4" d="m590.6,629.39c16.34,53.14,31.04,132.41,74.07,191.22,43.04,58.82,112.77,123.3,127.53,123.3s-25.44-64.48-39.69-105.14c-14.24-40.65-2.51-67.5,9.21-84.32" />
            </g>
          </g>
        </svg>

        <svg id="brain-sharp" viewBox="0 0 1009.99 952.03">
          <g>
            <g>
              <path class="cls-4" d="m761.73,754.46c29.01.31,55.08-4.5,77.57-17.63,22.5-13.13,41.42-34.59,53.09-56.66,11.66-22.07,16.08-44.76,15.77-58.86-.32-14.1-5.36-19.62,5.36-24.53,10.72-4.9,37.21-9.2,56.45-32.8,19.23-23.6,31.22-66.53,31.85-99.02.63-32.5-10.09-54.57-19.87-68.06-9.78-13.49-18.61-18.39-18.54-29.25.07-10.85,8.76-27.16,7.82-46.16-.94-19.01-11.67-40.47-26.81-52.09-15.14-11.62-35.95-13.52-46.98-26.09-11.04-12.57-12.93-35.87-24.6-57.94-11.67-22.07-33.11-42.92-55.5-54.57-22.39-11.65-45.73-14.11-64.96-24.83-19.24-10.73-34.38-29.74-51.4-37.98-17.02-8.23-34.69-5.86-51.72-14.45-17.03-8.58-32.8-28.2-56.44-38.01-23.65-9.81-55.19-9.81-79.63-.18-24.44,9.64-42.41,29.61-64.17,30.52-21.76.92-47.62-16.86-80.41-17.47-32.8-.61-72.53,15.94-97.76,31.88-25.23,15.94-35.95,31.27-46.35,35.56-10.41,4.29-20.5-2.45-38.47-4.29-17.98-1.84-43.84,1.23-60.23,20.85-16.4,19.62-23.34,55.79-35.32,73.27-11.99,17.47-29.01,16.25-43.84,24.52-14.82,8.28-27.43,26.06-28.07,45.07-.63,19.01,10.72,39.24,11.99,54.26,1.26,15.02-7.57,24.83-13.88,48.13-6.31,23.3-10.09,60.09-7.88,85.53,2.21,25.45,10.41,39.55,29.64,56.72,19.24,17.17,49.51,37.4,86.09,43.23,36.58,5.82,79.47-2.76,99.34-5.21,19.87-2.45,16.72,1.23,11.99,21.46-4.73,20.24-11.04,57.02,1.58,87.37,12.61,30.35,44.15,54.26,83.25,62.84,39.1,8.59,85.78,1.84,112.58-6.44,26.8-8.28,33.74-18.09,47.61-20.85,13.88-2.76,34.69,1.54,54.56-1.84,19.87-3.38,38.79-14.41,48.25-23.3,9.46-8.89,9.46-15.64,15.13-10.73,5.68,4.9,17.03,21.46,29.65,39.55,12.61,18.09,26.49,37.71,49.41,50.23,22.91,12.52,54.87,17.93,83.88,18.24h0Z" />
              <path class="cls-2" d="m761.73,754.46c29.01.31,55.08-4.5,77.57-17.63,22.5-13.13,41.42-34.59,53.09-56.66,11.66-22.07,16.08-44.76,15.77-58.86-.32-14.1-5.36-19.62,5.36-24.53,10.72-4.9,37.21-9.2,56.45-32.8,19.23-23.6,31.22-66.53,31.85-99.02.63-32.5-10.09-54.57-19.87-68.06-9.78-13.49-18.61-18.39-18.54-29.25.07-10.85,8.76-27.16,7.82-46.16-.94-19.01-11.67-40.47-26.81-52.09-15.14-11.62-35.95-13.52-46.98-26.09-11.04-12.57-12.93-35.87-24.6-57.94-11.67-22.07-33.11-42.92-55.5-54.57-22.39-11.65-45.73-14.11-64.96-24.83-19.24-10.73-34.38-29.74-51.4-37.98-17.02-8.23-34.69-5.86-51.72-14.45-17.03-8.58-32.8-28.2-56.44-38.01-23.65-9.81-55.19-9.81-79.63-.18-24.44,9.64-42.41,29.61-64.17,30.52-21.76.92-47.62-16.86-80.41-17.47-32.8-.61-72.53,15.94-97.76,31.88-25.23,15.94-35.95,31.27-46.35,35.56-10.41,4.29-20.5-2.45-38.47-4.29-17.98-1.84-43.84,1.23-60.23,20.85-16.4,19.62-23.34,55.79-35.32,73.27-11.99,17.47-29.01,16.25-43.84,24.52-14.82,8.28-27.43,26.06-28.07,45.07-.63,19.01,10.72,39.24,11.99,54.26,1.26,15.02-7.57,24.83-13.88,48.13-6.31,23.3-10.09,60.09-7.88,85.53,2.21,25.45,10.41,39.55,29.64,56.72,19.24,17.17,49.51,37.4,86.09,43.23,36.58,5.82,79.47-2.76,99.34-5.21,19.87-2.45,16.72,1.23,11.99,21.46-4.73,20.24-11.04,57.02,1.58,87.37,12.61,30.35,44.15,54.26,83.25,62.84,39.1,8.59,85.78,1.84,112.58-6.44,26.8-8.28,33.74-18.09,47.61-20.85,13.88-2.76,34.69,1.54,54.56-1.84,19..........完整代码请登录后点击上方下载按钮下载查看