react打造一个城市插画点击着色效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：react打造一个城市插画点击着色效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
.wrapper {
  width: 100vw;
  height: 100vh;
  background: #eee;
  display: flex;
  box-sizing: border-box;
}

.container {
  display: block;
  width: 80%;
  margin: 0 auto;
  height: auto;
}

.house {
  cursor: pointer;
  font-size: 30px;
  font-family: "Oak", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}
.house .bg-fill {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
.house text {
  fill: #333;
  transition: fill 0.3s ease-in;
}
.house:hover .bg-fill, .house.active .bg-fill {
  opacity: 1;
}
.house:hover text, .house.active text {
  fill: #333;
}
</style>

 

</head>

<body>
  <div class="wrapper"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-with-addons.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.parallax.js"></script>
      <script>
class CitySvg extends React.Component {
  componentDidMount() {
    this.houses = [this.houseOne, this.houseTwo, this.houseThree, this.houseFour, this.houseFive,
    this.houseSix, this.houseSeven, this.wheel2];
    this.index = '10';
    $('.container').parallax({ scalarX: 5, scalarY: 5 });
    TweenMax.set(this.wheel, { transformOrigin: '50% 50%' });
    TweenMax.to(this.wheel, 100, { rotation: '360', ease: Linear.easeNone, repeat: -1 });
  }

  mouseAction(evt) {
    const index = evt.currentTarget.dataset.project;
    console.log(this.houses[index]);
    this.houses[index].classList.toggle('active');
  }


  render() {
    return /*#__PURE__*/(
      React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", ref: c => this.wrapper = c, viewBox: "0 0 1031.41 441.18", className: "container" }, /*#__PURE__*/
      React.createElement("g", { className: "house", id: "house-seven", ref: h => this.houseSeven = h, "data-project": 6, onClick: e => this.mouseAction(e) }, /*#__PURE__*/
      React.createElement("g", { id: "bg-fill-2", className: "bg-fill" }, /*#__PURE__*/
      React.createElement("path", { fill: "#e82c84", d: "M904.92 271.63H843.7v5.98h4.06v112.88h53.1V277.61h4.06v-5.98z" }), /*#__PURE__*/
      React.createElement("path", { fill: "#f079b2", d: "M844.65 272.59h59.07v5.02h-59.07zm23.92 27.16V285.5h-12.44v14.25h-2.22v4.22h16.32v-4.22h-1.66zm24.08 0V285.5h-12.44v14.25h-2.22v4.22h16.31v-4.22h-1.65zm0 27.38v-14.24h-12.44v14.24h-2.22v4.23h16.31v-4.23h-1.65zm-23.96 0v-14.24h-12.44v14.24h-2.23v4.23h16.32v-4.23h-1.65zm0 27.62V340.5h-12.44v14.25h-2.23v4.22h16.32v-4.22h-1.65zm24.42 0V340.5h-12.44v14.25h-2.23v4.22h16.32v-4.22h-1.65zm-24.42 26.81v-14.24h-12.44v14.24h-2.23v4.23h16.32v-4.23h-1.65zm11.69-14.49h12.21v23.51h-12.21z" })), /*#__PURE__*/

      React.createElement("g", { id: "stroke-2" }, /*#__PURE__*/
      React.createElement("path", { fill: "#333", d: "M869.7 380.19V367.6a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.58a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2h15.13a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.89-1.99zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zm12.8 13.72a1.07 1.07 0 0 1-1.06 1.06h-12.83a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06h12.83a1.07 1.07 0 0 1 1.06 1.06zm.07-29.93v-12.57a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.56a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2h15.13a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.89-1.99zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zm12.8 13.72a1.07 1.07 0 0 1-1.06 1.06h-12.83a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06h12.83a1.07 1.07 0 0 1 1.06 1.06zm24.45-3.34v-12.57a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.56a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2H894a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.92-1.99zm-12.87-10.36a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zM894 356.96a1.07 1.07 0 0 1-1.06 1.06h-12.82a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06H893a1.07 1.07 0 0 1 1.06 1.06zm-24.3-31.15v-12.58a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.58a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2h15.13a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.89-2zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zm12.8 13.72a1.07 1.07 0 0 1-1.06 1.06h-12.83a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06h12.83a1.07 1.07 0 0 1 1.06 1.06zm24.45-3.34v-12.58a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.58a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2H894a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.92-2zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zM894 329.15a1.07 1.07 0 0 1-1.06 1.06h-12.82a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06H893a1.07 1.07 0 0 1 1 1.06zm.08-30.55v-12.57a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.56a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2H894a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.92-1.99zm-12.87-10.36a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zM894 301.96a1.07 1.07 0 0 1-1.06 1.06h-12.82a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06H893a1.07 1.07 0 0 1 1.06 1.06zm-24.3-3.36v-12.57a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.56a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2h15.13a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.89-1.99zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zm12.8 13.72a1.07 1.07 0 0 1-1.06 1.06h-12.83a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06h12.83a1.07 1.07 0 0 1 1.06 1.06z" }), /*#__PURE__*/
      React.createElement("path", { fill: "none", d: "M899 281.49c0-1.89-.63-2.25-2.35-2.25q-22.16.09-44.33 0c-2 0-2.52.58-2.51 2.56.08 17.43 0 34.86 0 52.29v53c0 1.75.41 2.35 2.27 2.33q12.27-.15 24.55 0c2 0 2.37-.69 2.34-2.49-.1-6.29 0-12.58-.07-18.87 0-1.77.55-2.44 2.35-2.37 3.1.11 6.22.16 9.32 0 2.25-.12 3.06.53 3 2.9-.16 6.21 0 12.43-.11 18.64 0 2.23 1 2.24 2.64 2.17s2.9.37 2.9-2.14q-.13-52.91 0-105.77zm3.58-6.28c0-1.78-1.24-1.38-2.22-1.38h-52c-1 0-2.23-.34-2.18 1.43s1.2 1.26 2.11 1.26h52c.94-.01 2.26.51 2.29-1.31z" }), /*#__PURE__*/
      React.createElement("path", { fill: "#333", d: "M905.31 279.27c.92-.47 1.53-7.83 0-8.19s-39.21 0-58.82 0c-3 0-3 0-3 3v2.5c-.14 1.74.15 3 2.38 2.76 1-.13 1.32.5 1.27 1.4v75.41c0 .45-.07.9-.11 1.35v2.81c0 9.16.07 18.33.14 27.49 0 1.19-.43 2.64-1.6 2.6-1.89-.06-3.79 0-5.68 0v.79h65.5v-.79a13.2 13.2 0 0 0-1.59 0c-1.62.19-2.07-1.57-2.06-3.12V281.4c-.09-3.17 2.67-1.66 3.57-2.13zm-14.07 109a1.15 1.15 0 0 1-1.15 1.15h-7.58a1.15 1.15 0 0 1-1.15-1.15v-18.74a1.15 1.15 0 0 1 1.15-1.15h7.58a1.15 1.15 0 0 1 1.15 1.15zm4.84 1.08c-1.59.07-2.7 0-2.64-2.17.15-6.21 0-12.43.11-18.64.06-2.37-.74-3-3-2.9-3.1.17-6.21.12-9.32 0-1.8-.06-2.37.61-2.35 2.37.08 6.29 0 12.58.07 18.87 0 1.8-.35 2.52-2.34 2.49q-12.27-.17-24.55 0c-1.86 0-2.27-.58-2.27-2.33.06-17.66 0-35.31 0-53v-52.29c0-2 .47-2.57 2.51-2.56q22.16.14 44.33 0c1.72 0 2.35.36 2.35 2.25q-.09 52.86 0 105.71c0 2.57-1.41 2.13-2.9 2.2zm4.21-112.83h-52c-.91 0-2.06.36-2.11-1.26s1.17-1.43 2.18-1.43h52c1 0 2.25-.4 2.22 1.38s-1.35 1.3-2.29 1.3z" }))), /*#__PURE__*/


      React.createElement("g", { className: "house", id: "house-six", ref: h => this.houseSix = h, "data-project": 5, onClick: e => this.mouseAction(e) }, /*#__PURE__*/
      React.createElement("g", { id: "bg-fill", className: "bg-fill" }, /*#__PURE__*/
      React.createElement("path", { fill: "#bd9ec9", d: "M751.19 225.73h27.99v165.55h-27.99z" }), /*#__PURE__*/
      React.createElement("path", { fill: "#906c99", d: "M751.16 264.15l-.21 11.61 28.28-27.75-.11-10.55-27.96 26.69zm.5 22.38l-.21 11.61 28.27-27.75-.1-10.55-27.96 26.69zm-.33 23.54l-.21 11.6 28.27-27.74-.1-10.55-27.96 26.69zm-.17 23.37l-.21 11.6 28.28-27.74-.11-10.56-27.96 26.7zm0 22.38l-.21 11.61 28.28-27.75-.11-10.55-27.96 26.69zm-.16 23.54l-.21 11.6 28.27-27.75-.1-10.55-27.96 26.7zm14.99 8.54l13.33-12.02-1.32 15.47-13.16-.66 1.15-2.79zm-15.31-145.49l.33 10.21 19.26-18.6-13.17.66-6.42 7.73z" })), /*#__PURE__*/

      React.createElement("path", { id: "stroke", fill: "#333", d: "M780 387.27q.1-54.82.06-109.63v-49.61c0-2.28-.68-3.21-3-3.07-2.76.16-5.55-.08-8.31.07-2.15.12-2.69-.72-2.68-2.77.08-13.86 0-27.72 0-41.58v-2.27c0-.76-.08-1.52-.93-1.56s-1.21.74-1.25 1.56v43.6c0 2.25-.49 3.2-2.92 3-2.84-.21-5.71 0-8.57-.07-1.77 0-2.62.58-2.66 2.46-.07 3.53.25 6.85.25 8.56v152.63a3.51 3.51 0 0 0 .81 2.4h29c.45-.62.2-2.09.2-3.72zm-25.8-159.95h21.67c2.52 0 2 1.73 2 3.15s.32 3-2 2.92c-3.69-.07-7.39 0-11.09 0-3.53 0-7.06-.09-10.58 0-2 .07-2.3-.92-2.1-2.48s-.8-3.6 2.1-3.59zm-2.09 55.13c-1-4.49 1.35-7.58 4.31-10.47 6.62-6.47 13.2-13 19.81-19.46a1.85 1.85 0 0 1 1.59-.78v6.37a2.92 2.92 0 0 1-1.12 2.15l-22.92 22.94c-.35.35-.66.91-1.2.76-.79-.23-.36-1-.47-1.51zm0-27.4a3.37 3.37 0 0 1 1.17-2.64q7.75-7.74 15.46-15.51c1-1 6.86-2 8.13-1.21s.1 1.27-.31 1.7q-3.11 3.28-6.33 6.47-8.38 8.33-16.8 16.63a1.19 1.19 0 0 1-1.32.41v-5.85zm13.52-18.18q-6.42 6.68-12.88 13.32l-.81-.59v-6.48a3 3 0 0 1 1.12-2.17 15.36 15.36 0 0 0 2.47-2.5c2.41-3.9 6.23-2.86 9.73-2.9 1.16 0 .89.76.36 1.32zm9.21 14c-7.06 6.4-13.59 13.4-20.36 20.13-.62.62-1.09 1.5-2.43 1.65.16-3.82-.75-7.41 2.86-10.69 7.24-6.58 14-13.75 20.89-20.66.5-.5.85-1.27 2-1.26.16 4 .62 7.51-3 10.83zm-21.33-15.6c.77 0 1.33.25 1.2 1.17-.17 1.2-1.18 1.5-2.1 1.89-.89 0-.84-.62-.88-1.2a1.55 1.55 0 0 1 1.77-1.86zm.88 50.43c7.2-7 14.27-14.22 21.42-21.32.49-.48.87-1.5 1.74-1.1.7.31.26 1.21.36 1.84.59 3.87-.81 6.68-3.74 9.41-6.75 6.28-13.11 13-19.65 19.5-.63.63-1.24 1.9-2.1 1.56-1.06-.43-.3-1.78-.46-2.72a10.42 10.42 0 0 1 0-1.42c-.63-2.2.61-4 2.46-5.74zm22.43 55.33l-23.14 23.1c-.35.35-.65.86-1.23.62s-.35-.85-.42-1.32c-.72-4.69 1.13-8 4.72-11.13 6.39-5.66 12.21-12 18.23-18a19.21 19.21 0 0 0 1.87-2.65l1 .75v6.73a2.71 2.71 0 0 1-1 1.93zm-2.41 13.93c-7.08 6.28-13.51 13.29-20.23 20-.56.56-.91 .........完整代码请登录后点击上方下载按钮下载查看