react实现用筷子夹起碗里热腾腾面条交互动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：react实现用筷子夹起碗里热腾腾面条交互动画效果代码，按住键盘向下键开始操作。

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


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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
* {
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
body {
  background: #26c281;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
</style>



</head>

<body>
  <div id="root"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<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 type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/styled-components.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/prop-types.min.js"></script>
      <script >
const {
  TweenMax,
  ReactDOM: { render },
  React: { useEffect, useState, useRef, Fragment },
  PropTypes,
  styled,
  styled: { keyframes, css } } =
window;

const NOODLES_MAP = {
  RICE: {
    colors: ['#deb887', '#cdaa7d'],
    thickness: 8 },

  EGG: {
    colors: ['yellow', 'orange'],
    thickness: 8 } };



const SHAKES = [
[0, 0, 0],
[1, 1, 0],
[-1, -2, -1],
[-3, 0, 1],
[3, 2, 0],
[1, -1, 1],
[-1, 2, -1],
[-3, 1, 0],
[3, 1, -1],
[-1, -1, 1],
[1, 2, 0],
[1, -2, -1],
[0, 0, 0]];

const shake = keyframes`
  ${SHAKES.map(
(s, i) => `
    ${i * 100 / SHAKES.length}% {
      transform: translate(-50%, 50%) translate(${s[0]}px, ${s[1]}px) rotate(${
s[2]
}deg);
    }
  `)
}
`;

const Bowl = styled.div`
  position: absolute;
  bottom: 5px;
  left: 50%;
  height: 75px;
  width: 150px;
  border-radius: 5px 5px 75px 75px;
  background: #fafafa;
  transform: translate(-50%, 0);
`;

const getNoodleStyle = ({ thickness, colors }) => {
  return `background: repeating-radial-gradient(${colors[1]}, ${
  colors[1]
  } ${thickness}px, ${colors[0]} ${thickness}px, ${colors[0]} ${thickness *
  2}px);`;
};

const BowlNoodles = styled.div`
  border-radius: 100%;
  ${p => getNoodleStyle(p.noodles)};
  position: absolute;
  top: 0%;
  height: 100px;
  width: 100px;
  left: 50%;
  transform: translate(-50%, 0%);

  &:before,
  &:after {
    content: '';
    height: 100px;
    width: 100px;
    border-radius: 100%;
    position: absolute;
    ${p => getNoodleStyle(p.noodles)};
  }

  &:before {
    top: 25%;
    left 18%;
  }
  &:after {
    top: 30%;
    left: -18%;
  }
`;
const Container = styled.div`
  height: 150px;
  width: 150px;
  position: absolute;
  bottom: 50vh;
  left: 50%;
  transform: translate(-50%, 50%);
  &:after {
    content: '';
    height: 25%;
    width: 50%;
    position: absolute;
    bottom: 0;
    background: #fafafa;
    left: 50%;
    transform: translate(-50%, 0);
  }
  ${(p) =>
p.shake &&
css`
      animation: ${shake} 0.1s infinite;
    `};
`;

const Face = styled.div`
  position: absolute;
  height: 15px;
  width: 60px;
  top: 15%;
  left: 50%;
  transform: translate(-50%, 0);
`;

const blink = keyframes`
  0%, 73%, 75%, 100% {
    transform: scaleY(1);
  }
  74% {
    transform: scaleY(0.1);
  }
`;

const Eye = styled.div`
  background: ${p => p.straining ? 'transparent' : '#000'};
  border-radius: 100%;
  height: 15px;
  width: 15px;
  position: absolute;
  ${(p) =>
!p.straining &&
css`
      background: #000;
      animation: ${blink} 8s infinite linear;
      &:after,
      &:before {
        content: '';
        background: #fff;
        position: absolute;
        border-radius: 100%;
      }

      &:after {
        height: 30%;
        left: 20%;
        top: 15%;
        width: 30%;
      }

      &:before {
        height: 15%;
        left: 25%;
        top: 55%;
        width: 15%;
      }
    `} ${(p) =>
p.straining &&
`
    &:after,
    &:before {
      content: '';
      background: #000;
      border-radius: 0;
      height: 2px;
      left: 50%;
      position: absolute;
      top: 50%;
      transform-origin: right;
      width: 15px;
    }

    &:after {
      transform: translate(-50%, -50%) rotate(20deg);
    }

    &:before {
      transform: translate(-50%, -50%) rotate(-20deg);
    }

    &:nth-of-type(2) {
      transform: rotate(180deg);
    }
  `}

  &:nth-of-type(1) {
    left: 0;
  }

  &:nth-of-type(2) {
    right: 0;
  }
`;

const Mouth = styled.div`
  height: 15px;
  width: 15px;
  border-radius: 100%;
  position: absolute;
  background: #000;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  clip-path: polygon(0 50%, .........完整代码请登录后点击上方下载按钮下载查看