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&.........完整代码请登录后点击上方下载按钮下载查看