react实现卧室背景墙艺术图案效果代码-html代码-BFW代码库

代码语言：html

所属分类：背景

代码描述：react实现卧室背景墙艺术图案效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two&display=swap');

body{
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh;
  overflow: hidden;
  background:#F4F4F4;

}


svg{
  width: 100vw;
  height: 100vh;
  background: #F4F4F4;
}

.btn-refresh{


position: fixed;
right: 16px;
top: 16px;
padding: 12px 16px;

background: #FFFFFF;
box-shadow: inset -2px -2px 6px rgba(108, 104, 104, 0.25);
border-radius: 100px;
color: rgb(240, 157, 215);
cursor: pointer;
border: none;
font-family: 'Lobster Two', cursive;
font-size: 18px;
}
.btn-refresh:hover{
  box-shadow: inset -1px -1px 6px rgba(108, 104, 104, 0.25);
  color: rgb(235, 139, 206);
}
</style>



</head>

<body  >
  <div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
      <script  >
const { useState } = React;

const rand = (max, min = 0) => min + Math.random() * (max - min);
const randInt = (max, min = 0) => Math.floor(rand(max, min));
const randChoise = arr => arr[randInt(arr.length)];
const range = (n, m = 0) =>
Array(n).
fill(m).
map((i, j) => i + j);

const palette = ['#FFEE7E', '#8BE4E4', '#BE96D1'];

const randomConfig = () => {
  const x = rand(1100, 100);
  const y = rand(500, 100);
  const scale = rand(14);
  return {
    transform: `translate(${x} ${y}) scale(${scale} ${scale})`,
    color: randChoise(palette),
    id: randInt(7) };

};

const App = () => {
  const [items, setItems] = useState(range(40).map(() => randomConfig()));
  const generateNew = () => {
    setItems(range(40).map(() => randomConfig()));
  };
  return /*#__PURE__*/(
    React.createElement(React.Fragment, null, /*#__PURE__*/
    React.createElement("button", { className: "btn-refresh", onClick: generateNew }, "Generate New"), /*#__PURE__*/


    React.createElement("svg", {
      id: "svg",
      viewBox: "0 0 1280 720",
      fill: "none",
      xmlns: "http://www.w3.org/2000/svg" }, /*#__PURE__*/

    React.createElement("rect", { width: "1280", height: "720", fill: "#F4F4F4" }), /*#__PURE__*/
    React.createElement("g", { filter: "url(#filter0_d)" }, /*#__PURE__*/
    React.createElement("rect", { x: "538", y: "88", width: "204", height: "544", fill: "white" })), /*#__PURE__*/

    React.createElement("g", { filter: "url(#filter1_d)" }, /*#__PURE__*/
    React.createElement("rect", { x: "754", y: "155.5", width: "204", height: "409", fill: "white" })), /*#__PURE__*/

    React.createElement("g", { filter: "url(#filter2_d)" }, /*#__PURE__*/
    React.createElement("rect", { x: "322", y: "155.5", width: "204", height: "409", fill: "white" })), /*#__PURE__*/

    React.createElement("g", { filter: "url(#filter3_d)" }, /*#__PURE__*/
    React.createElement("rect", { x: "970", y: "225", width: "204", height: "270", fill: "white" })), /*#__PURE__*/

    React.createElement("g", { filter: "url(#filter4_d)" }, /*#__PURE__*/
    React.createElement("rect", { x: "106", y: "225", width: "204", height: "270", fill: "white" })), /*#__PURE__*/

    React.createElement("defs", null, /*#__PURE__*/
    React.createElement("filter", {
      id: "filter0_d",
      x: "538",
      y: "88",
      width: "218",
      height: "558",
      filterUnits: "userSpaceOnUse",
      colorInterpolationFilters: "sRGB" }, /*#__PURE__*/

    React.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), /*#__PURE__*/
    React.createElement("feColorMatrix", {
      in: "SourceAlpha",
      type: "matrix",
      values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }), /*#__PURE__*/

    React.createElement("feOffset", { dx: "7", dy: "7" }), /*#__PURE__*/
    React.createElement("feGaussianBlur", { stdDeviation: "3.5" }), /*#__PURE__*/
    React.createElement("feColorMatrix", {
      type: "matrix",
      values: "0 0 0 0 0.584314 0 0 0 0 0.545098 0 0 0 0 0.545098 0 0 0 0.25 0" }), /*#__PURE__*/

    React.createElement("feBlend", {
      mode: "normal",
      in2: "BackgroundImageFix",
      result: "effect1_dropShadow" }), /*#__PURE__*/

    React.createElement("feBlend", {
      mode: "normal",
      in: "SourceGraphic",
      in2: "effect1_dropShadow",
      result: "shape" })), /*#__PURE__*/


    React.createElement("filter", {
      id: "filter1_d",
      x: "754",
      y: "155.5",
      width: "218",
      height: "423",
      filterUnits: "userSpaceOnUse",
      colorInterpolationFilters: "sRGB" }, /*#__PURE__*/

    React.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), /*#__PURE__*/
    React.createElement("feColorMatrix", {
      in: "SourceAlpha",
      type: "matrix",
      values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }), /*#__PURE__*/

    React.createElement("feOffset", { dx: "7", dy: "7" }), /*#__PURE__*/
    React.createElement("feGaussianBlur", { stdDeviation: "3.5" }), /*#__PURE__*/
    React.createElement("feColorMatrix", {
      type: "matrix",
      values: "0 0 0 0 0.584314 0 0 0 0 0.545098 0 0 0 0 0.545098 0 0 0 0.25 0" }), /*#__PURE__*/

    React.createElement("feBlend", {
      mode: "normal",
      in2: "BackgroundImageFix",
      result: "effect1_dropShadow" }), /*#__PURE__*/

    React.createElement("feBlend", {
      mode: "normal",
      in: "SourceGraphic",
      in2: "effect1_dropShadow",
      result: "shape" })), /*#__PURE__*/


    React.createElement("filter", {
      id: "filter2_d",
      x: "322",
      y: "155.5",
      width: "218",
      height: "423",
      filterUnits: "userSpaceOnUse",
      colorInterpolationFilters: "sRGB" }, /*#__PURE__*/

    React.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFi.........完整代码请登录后点击上方下载按钮下载查看