svg电影海报点击放大特效代码-html代码-BFW代码库

代码语言：html
代码描述：svg电影海报点击放大特效代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
#app {
  background: #1a1228;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#solo-poster,
#characters,
#character-click-paths {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100vh;
  width: 160vh;
}
@media (min-width: 160vh) {
  #solo-poster,
#characters,
#character-click-paths {
    width: 100vw;
    height: 62.5vw;
  }
}

#bg-highlight,
#sun-flare,
#sun-ambience-fluctuating {
  -webkit-animation: 15s starlight infinite;
          animation: 15s starlight infinite;
}

@-webkit-keyframes starlight {
  0% {
    opacity: 0.3;
  }
  5% {
    opacity: 0.6;
  }
  15% {
    opacity: 0.4;
  }
  20% {
    opacity: 0.8;
  }
  25% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 0.4;
  }
  40% {
    opacity: 0.6;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  55% {
    opacity: 0.3;
  }
  60% {
    opacity: 0.6;
  }
  65% {
    opacity: 0.4;
  }
  70% {
    opacity: 0.2;
  }
  80% {
    opacity: 0.6;
  }
  85% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.4;
  }
  95% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.35;
  }
}

@keyframes starlight {
  0% {
    opacity: 0.3;
  }
  5% {
    opacity: 0.6;
  }
  15% {
    opacity: 0.4;
  }
  20% {
    opacity: 0.8;
  }
  25% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 0.4;
  }
  40% {
    opacity: 0.6;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  55% {
    opacity: 0.3;
  }
  60% {
    opacity: 0.6;
  }
  65% {
    opacity: 0.4;
  }
  70% {
    opacity: 0.2;
  }
  80% {
    opacity: 0.6;
  }
  85% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.4;
  }
  95% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.35;
  }
}
.sun {
  transform: translateX(-15vw);
}

#sun-flare {
  mix-blend-mode: color-dodge;
}

#names {
  display: flex;
  justify-content: center;
}
#names svg {
  display: block;
  position: absolute;
  top: 15vmin;
  width: 80%;
  height: auto;
  fill: white;
  mix-blend-mode: overlay;
}

.transition--names--enter-active {
  transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.transition--names--leave-active {
  position: absolute;
  transition: opacity 0.6s, transform 1s;
}

.transition--names--enter {
  opacity: 0;
  transform: translate3d(0, 20vh, 0) scale(0.5);
}

.transition--names--leave-to {
  opacity: 0;
  transform: translate3d(0, -30vh, 0) scale(1.5);
}

.character {
  position: relative;
  transition: opacity 0.5s, transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.character-click-el {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.l3-37 {
  transform: translate(30%, 7vmax);
  transition-delay: 0s !important;
}

.beckett {
  transform: translate(38%, 5vmax);
  transition-delay: 0.1s !important;
}

.lando {
  transform: translate(27%, 5vmax);
  transition-delay: 0.2s !important;
}

.solo {
  transform: translate(33%, 5vmax);
  transition-delay: 0.3s !important;
}

.qira {
  transform: translate(40%, 5vmax);
  transition-delay: 0.4s !important;
}

.chewie {
  transform: translate(34%, 1vmax);
  transition-delay: 0.5s !important;
}

.characters-unfocused .solo {
  transform: translate(36%, calc(5% + 5vmax)) scale(0.9);
}
.characters-unfocused .qira {
  transform: translate(calc(48% + 10vmin), calc(25% + 5vmax)) scale(0.6);
}
.characters-unfocused .chewie {
  transform: translate(calc(50% + 10vmin), calc(20% + 1vmax)) scale(0.65);
}
.characters-unfocused .lando {
  transform: translate(calc(30% + 10vmin), calc(25% + 5vmax)) scale(0.6);
}
.characters-unfocused .beckett {
  transform: translate(calc(38.5% - 8vmin), calc(25% + 5vmax)) scale(0.56);
}
@media (max-width: 600px) {
  .characters-unfocused .beckett {
    transform: translate(calc(32.5% + 10vmin), calc(25% + 5vmax)) scale(0.56);
  }
}
.characters-unfocused .l3-37 {
  transform: translate(calc(20% + 10vmin), calc(30% + 5vmax)) scale(0.5);
}
@media (max-width: 600px) {
  .characters-unfocused .l3-37 {
    transform: translate(calc(23% + 10vmin), calc(30% + 5vmax)) scale(0.5);
  }
}

.transition-character--enter,
.transition-character--leave-to {
  opacity: 0;
  transform: translate(50%, 50%) scale(0.5) !important;
}

.testing {
  position: absolute;
}
</style>



</head>

<body >
  <div id="app">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1680 1050" id="solo-poster">
    <defs>
      <mask id="mask--bg-highlight">
        <image xlink:href="//repo.bfw.wiki/bfwrepo/image/5fe5a06da4e64.png" width="1680" height="1050"/>
      </mask>
      
      <mask id="mask--sun-flare">
        <image xlink:href="//repo.bfw.wiki/bfwrepo/image/5fe5a09539fd2.png" width="1123" height="420" x="0" y="350" class="sun"/>
      </mask>

      <filter id="blur" x="-40%" y="-40%" width="180%" height="180%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
      </filter>
    </defs>
    
    <image xlink:href="//repo.bfw.wiki/bfwrepo/image/5fe5a0c0735e2.png" width="1680" height="1050" x="0" y="0"/>
    
    <rect mask="url(#mask--bg-highlight)" id="bg-highlight" width="1680" height="1050" fill="#fffed6" />
    
    <circle filter="url(#blur)" cx="485" cy="560" r="60" fill="white" class="sun"/> 
    <image mask="url(#mask--sun-flare)" xlink:href="//repo.bfw.wiki/bfwrepo/image/5fe5a0e4b5482.png" x="0" y="350" class="sun" id="sun-flare"/>
  </svg>
  
  <transition-group name="transition--names-" id="names">
    <svg id="name--solo" v-if="focusedCharacter == 'solo' || hoveredCharacter == 'solo'" key="solo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 857.9 332.5">
      <path id="XMLID_37_" class="st0" d="M198.9 153.8L120.5 166c-4 .6-5.6 3.2-4.9 7.8.1.5 12.1 8.8 36.2 24.9 11.7 7.7 18.7 19.2 21 34.4 3 19.2-2.3 37.1-15.7 53.8-12.8 16.2-28.3 25.6-46.4 28.5L0 332.5 1 265l73-11.3c4-.6 5.6-3.3 4.8-8-.1-.4-11.4-7.9-33.9-22.5-9.7-6.4-15.6-16.4-17.7-30.2-3.1-20.3 1.5-39.5 13.9-57.6 12.5-18.2 28.3-28.8 47.5-31.8l111.1-17.2-.8 67.4z"/>
      <path id="XMLID_40_" class="st0" d="M427.8 140.9c5.1 32.7-4.4 63.7-28.5 92.8-23.3 28.2-51.4 44.9-84.5 50-26.2 4.1-49.5-.6-69.9-13.9-21.6-13.7-34.3-33.4-38.3-59.2-5.1-32.7 4.4-63.7 28.5-93 23.3-28.1 51.5-44.7 84.5-49.8 26.2-4.1 49.5.6 69.9 13.9 21.6 13.7 34.4 33.4 38.3 59.2zm-70.2 22.5c-1.5-9.4-6.1-16.8-13.8-22.1-7.7-5.4-16.3-7.4-25.8-5.9-12 1.9-22.3 8.2-30.8 19.1-8.6 10.8-12 22.1-10.2 34 1.5 9.4 6 16.8 13.7 22.1 7.5 5.2 16.2 7.1 25.9 5.6 11.9-1.8 22.2-8.2 30.8-18.9 8.5-11.1 11.9-22.3 10.2-33.9z"/>
      <path id="XMLID_43_" class="st0" d="M630.4 234.9l-184.9 28.6L447.7 48l74.1-11.5-1.7 148.1 111.1-17.2-.8 67.5z"/>
      <path id="XMLID_64_" class="st0" d="M856.6 74.5c5.1 32.7-4.4 63.7-28.5 92.8-23.3 28.2-51.4 44.9-84.5 50-26.2 4.1-49.5-.6-69.9-13.9-21.6-13.7-34.3-33.4-38.3-59.2-5.1-32.7 4.4-63.7 28.5-93 23.3-28.1 51.5-44.7 84.5-49.8 26.2-4.1 49.5.6 69.9 13.9 21.5 13.7 34.3 33.4 38.3 59.2zM786.3 97c-1.5-9.4-6.1-16.8-13.8-22.1-7.7-5.4-16.3-7.4-25.8-5.9-12 1.9-22.3 8.2-30.8 19.1-8.6 10.8-12 22.1-10.2 34 1.5 9.4 6 16.8 13.7 22.1 7.5 5.2 16.2 7.1 25.9 5.6 11.9-1.8 22.2-8.2 30.8-18.9 8.5-11.1 12-22.3 10.2-33.9z"/>
    </svg>
    
    <svg id="name--qira" v-if="focusedCharacter == 'qira' || hoveredCharacter == 'qira'" key="qira" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840.3 322.8">
      <path id="XMLID_95_" class="st0" d="M221.2 303.4L104 321.6c-24.6 3.8-46.6-1-66-14.5C17.6 293 5.4 273.2 1.4 247.6-3.7 214.9 5 184 27.4 155c21.7-27.8 48-44.2 79.1-49 24.6-3.8 46.6 1 66 14.5 20.5 14.1 32.7 33.9 36.6 59.6 3 19.4.8 39-6.6 58.9l19.7-3-1 67.4zm-78.1-101.6c-1.5-9.4-5.9-16.8-13.2-22.2-7.3-5.5-15.4-7.5-24.4-6.1-11.3 1.7-20.9 8-28.8 18.8-8 10.7-11.1 22-9.3 33.8 1.5 9.4 5.8 16.8 13.1 22.2 7.1 5.3 15.3 7.2 24.5 5.8 11.2-1.7 20.8-7.9 28.8-18.6 8-10.9 11.1-22.1 9.3-33.7z"/>
      <path id="XMLID_98_" class="st0" d="M311.2 289.5l-73.8 11.4 2.3-215.5 74.1-11.5-2.6 215.6z"/>
      <path id="XMLID_100_" class="st0" d="M376.7 86.7c1.5 9.4-1.4 21.7-8.5 36.8-7.5 15.5-15.4 24.2-23.6 26.4l7.5-28.1c-5.9.9-11.1-.4-15.7-4s-7.4-8.5-8.3-14.6c-1.2-7.7.8-15.2 5.8-22.5 5.3-7.3 11.5-11.6 18.8-12.7 5.9-.9 11.1.4 15.7 4 4.5 3.5 7.3 8.5 8.3 14.7z"/>
      <path id="XMLID_102_" class="st0" d="M599.2 90.7c2.6 16.6-.4 33.1-9 49.3-8.1 15.5-19.2 27.4-33.5 35.6 3 5.2 7.3 7.4 12.9 6.5l42-6.5-1 67.5-64.1 9.9c-16.6 2.6-33-3.9-49.1-19.4l-34.1-32.4-.9 64.8-73.8 11.4L391 62l140.8-21.8c16.1-2.5 30.7 1.1 43.7 10.7 13.2 9.6 21.1 22.9 23.7 39.8zm-73.5 23.2c-.6-3.7-2.2-6.7-5-8.9-2.8-2.3-5.9-3.1-9.4-2.6l-47 7.3-.3 32.4 47-7.3c4.2-.7 7.9-3.1 11-7.4 3.2-4.4 4.5-8.9 3.7-13.5z"/>
      <path id="XMLID_105_" class="st0" d="M763.7 219.4l-6-26-56.3 8.7-6.8 28-76.4 11.8 54.1-223.6L790.9 0l49.3 207.5-76.5 11.9zm-33-138.3L715 146.3l30.1-4.7-14.4-60.5z"/>
    </svg>
    
    <svg id="name--chewie" v-if="focusedCharacter == 'chewie' || hoveredCharacter == 'chewie'" key="chewie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1255.7 394.8">
      <path id="XMLID_82_" class="st0" d="M185.8 233l-80.3 12.4c-11.3 1.7-20.9 8-28.8 18.8-8 10.7-11.1 22-9.3 33.8 1.5 9.4 5.8 16.8 13.1 22.2 7.1 5.3 15.3 7.2 24.5 5.8l80.2-12.4-1 67.5-80.2 12.5c-24.6 3.8-46.6-1-66-14.5-20.5-14.1-32.7-34-36.7-59.7-5-32.5 3.6-63.3 26-92.3 21.7-27.8 48-44.2 79.1-49l80.3-12.4-.9 67.3z"/>
      <path id="XMLID_84_" class="st0" d="M415.8 345.3l-74.1 11.5.9-79.4-61.8 9.6-.9 79.4-73.8 11.4 2.3-215.5 74.1-11.5-.9 79.4 61.8-9.6.9-79.4 74.1-11.5-2.6 215.6z"/>
      <path id="XMLID_86_" class="st0" d="M638.9 162.9L515.4 182l.1 12 74.1-11.5-.8 56.7-74.1 11.5.1 12 123.6-19.1-1 67.5L440 341.5l2.3-215.5 197.5-30.6-.9 67.5z"/>
      <path id="XMLID_88_" class="st0" d="M900.5 270.2l-83.9 13-16.2-69.4-18.4 74.8-83.9 13L648.7 94l76.5-11.9 16.2 69.2 18.4-74.6 83.9-13 16.3 69.2 18.2-74.5 76.6-11.9-54.3 223.7z"/>
      <path id="XMLID_90_" class="st0" d="M1037.7 249l-73.8 11.4 2.3-215.5 74.1-11.5-2.6 215.6z"/>
      <path id="XMLID_92_" class="st0" d="M1254.8 67.5l-123.4 19.1.1 12 74.1-11.5-.8 56.7-74.1 11.5.1 12 123.6-19.1-1 67.5-197.4 30.6 2.3-215.5L1255.7 0l-.9 67.5z"/>
    </svg>
    
    <svg id="name--lando" v-if="focusedCharacter == 'lando' || hoveredCharacter == 'lando'" key="lando" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1084.8 368.4">
      <path id="XMLID_68_" class="st0" d="M184.9 339.7L0 368.4l2.3-215.5 74.1-11.5-1.7 148.1 111.1-17.2-.9 67.4z"/>
      <path id="XMLID_70_" class="st0" d="M338 316l-6-26-56.3 8.7-6.8 28-76.4 11.8L246.7 115l118.5-18.4 49.3 207.5L338 316zm-33-138.3l-15.7 65.2 30.1-4.7-14.4-60.5z"/>
      <path id="XMLID_73_" class="st0" d="M636.9 269.7l-74.1 11.5c-.1-6.3-.6-12.6-1.6-18.8-3-19.3-9-34.9-17.9-46.7-10.7-14.5-24.5-20.9-41.2-19.2l-1.1 94.3-73.8 11.4 2.3-215.5 1-.2c27.1-4.2 51.6-3.1 73.6 3.4 26.3 7.5 46.4 21.8 60.3 43l1-67.3 74.1-11.5-2.6 215.6z"/>
      <path id="XMLID_75_" class="st0" d="M865 109.2c5.1 32.6-3.6 63.4-26 92.3-21.7 27.9-48 44.3-79.1 49.1l-104.8 16.2 2.3-215.5L762.3 35c24.6-3.8 46.6 1 66 14.5 20.5 14.2 32.7 34.1 36.7 59.7zm-66.1 21.4c-1.4-9.3-5.8-16.7-13.2-22-7.3-5.4-15.4-7.4-24.3-6l-35.7 5.5-.7 80.7 35.9-5.6c11.2-1.7 20.8-7.9 28.8-18.6 8-10.9 11-22.3 9.2-34z"/>
      <path id="XMLID_78_" class="st0" d="M1083.4 75.2c5.1 32.7-3.6 63.6-26 92.5-21.7 27.9-48 44.3-79.1 49.1-24.6 3.8-46.6-1-66-14.5-20.4-13.9-32.6-33.7-36.6-59.4-5.1-32.7 3.6-63.6 26-92.6 21.7-27.8 48-44.2 79.1-49 24.6-3.8 46.6 1 66 14.5 20.4 13.9 32.6 33.7 36.6 59.4zm-66 21.8c-1.5-9.4-5.9-16.8-13.2-22.2-7.3-5.5-15.4-7.5-24.4-6.1-11.3 1.7-20.9 8-28.8 18.8-8 10.7-11.1 22-9.3 33.8 1.5 9.4 5.8 16.8 13.1 22.2 7.1 5.3 15.3 7.2 24.5 5.8 11.2-1.7 20.8-7.9 28.8-18.6 8-10.9 11.1-22.1 9.3-33.7z"/>
    </svg>
    
    <svg id="name--becket" v-if="focusedCharacter == 'beckett' || hoveredCharacter == 'beckett'" key="beckett" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1441.7 437.7">
      <path id="XMLID_51_" class="st0" d="M198.4 245.2c2.7 17.3-1.3 33.9-11.9 49.8 13 7.7 20.8 19.7 23.4 36.3 3.2 20.6-2.8 39.4-18.1 56.2-14.2 15.9-31.3 25.3-51.3 28.4L0 437.7l2.3-215.5 128.4-19.9c15.6-2.4 29.8 0 42.6 7.3 14.3 8 22.7 19.9 25.1 35.6zm-62.2 99c-.6-3.7-2.2-6.7-5-8.9-2.8-2.3-5.9-3.1-9.4-2.6l-51.8 8-.3 32.4 51.8-8c4.4-.7 8.1-3.2 11.1-7.6 3.1-4.4 4.3-8.9 3.6-13.3zm-1.4-75.1c-.3-1.8-.9-3.5-1.8-5.1-.9-1.5-2.1-2.8-3.4-3.8-1.3-1-2.8-1.7-4.4-2.2-1.6-.5-3.3-.6-5-.3l-49.5 7.7-.3 32.4 49.5-7.7c4.4-.7 8.1-3.2 11.1-7.6 3.2-4.5 4.5-8.9 3.8-13.4z"/>
      <path id="XMLID_55_" class="st0" d="M424.8 224.8L301.4 244l.1 12 74.1-11.5-.8 56.7-74.1 11.5.1 12 123.6-19.1-1 67.5L226 403.7l2.3-215.5 197.5-30.6-1 67.2z"/>
      <path id="XMLID_57_" class="st0" d="M616 195.2l-80.3 12.4c-11.3 1.7-20.9 8-28.8 18.8-8 10.7-11.1 22-9.3 33.8 1.5 9.4 5.8 16.8 13.1 22.2 7.1 5.3 15.3 7.2 24.5 5.8l80.2-12.4-1 67.5-80.2 12.4c-24.6 3.8-46.6-1-66-14.5-20.5-14.1-32.7-34-36.7-59.7-5-32.5 3.6-63.3 26-92.3 21.7-27.8 48-44.2 79.1-49l80.3-12.4-.9 67.4z"/>
      <path id="XMLID_59_" class="st0" d="M769.3 216.6l29.3 27.8c2 1.8 6 2.2 12.1 1.3l30.4-4.7-1 67.5-51.8 8c-16.6 2.6-33-3.9-49.1-19.4l-34.1-32.4-.9 64.8-73.8 11.4 2.3-215.5 74.1-11.5-.9 70.6 46.4-77.6 90.4-14-73.4 123.7z"/>
      <path id="XMLID_61_" class="st0" d="M1053.2 127.5l-123.4 19.1.1 12 74.1-11.5-.8 56.7-74.2 11.5.1 12 123.6-19.1-1 67.5-197.4 30.6 2.3-215.5L1054.2 60l-1 67.5z"/>
      <path id="XMLID_35_" class="st0" d="M1067.5 58l-.9 67.4 67.8-10.5-1.5 148.1 74.1-11.5 1.5-148.1 90.1-13.9-1.5 148.1 74.1-11.5 1.5-148.1 68-10.5 1-67.5z"/>
    </svg>
    
    <svg id="name--l3-37" v-if="focusedCharacter == 'l3-37' || hoveredCharacter == 'l3-37'" key="l3-37" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 908.8 355.3">
      <path id="XMLID_36_" class="st0" d="M378.9 188.9c10.7-16.9 14.6-34.7 11.7-53.4-2.4-15.7-9.3-28-20.6-36.8-11.3-8.9-24.4-12.1-39.2-9.8l-135.8 21-.8 61.9 123.4-19.1c4.1-.6 6.6 1.5 7.4 6.4.4 2.7-.2 5.1-1.7 7.3s-3.5 3.5-5.8 3.8l-74.1 11.5-.7 56.7 74.1-11.5c4.1-.6 6.5 1.5 7.2 6.3.4 2.5-.2 4.8-1.6 7.1-1.5 2.3-3.4 3.6-5.7 4L74.8 281.2l1.7-152.9-74.2 11.4L0 355.3l328.2-50.8c19.1-3 34.9-13.4 47.4-31.5 12.6-18.1 17.3-37.5 14.1-58-1.5-10-5.1-18.7-10.8-26.1z"/>
      <path id="XMLID_44_" class="st0" d="M508.5 189.7L409.7 205l.4-40.4 98.8-15.3-.4 40.4z"/>
      <path id="XMLID_46_" class="st0" d="M686.1 90.5c2.9 18.7-1 36.5-11.7 53.4 5.7 7.4 9.3 16.1 10.9 26.1 3.2 20.5-1.5 39.9-14.1 58-12.5 18-28.3 28.5-47.4 31.5l-135.6 21 .8-62.1 123.3-19.1c2.3-.4 4.2-1.7 5.7-4s2-4.6 1.6-7.1c-.7-4.8-3.1-6.9-7.2-6.3l-74.1 11.5.7-56.7 74.1-11.5c2.3-.4 4.2-1.6 5.8-3.8 1.5-2.2 2.1-4.6 1.7-7.3-.8-4.9-3.2-7.1-7.4-6.4l-123.4 19.1.8-61.9 135.8-21c14.8-2.3 27.9 1 39.2 9.8 11.2 8.8 18 21.1 20.5 36.8z"/>
      <path id="XMLID_48_" class="st0" d="M775.4 235.8L696.5 248l94.9-168-93.3 14.5.8-61.9L908.8 0 775.4 235.8z"/>
    </svg>
  </transition-group>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1680 1050" id=&q.........完整代码请登录后点击上方下载按钮下载查看