221227 눈이 내리게 하기

//src/App.js

import './snow.css'

const A = () => [

  const Snowflake = ({ style }) => {
    return (
      <p className="snow-flake" style={style}>
        {'\u2745'}
      </p>
    );
  };
  
  const makeSnowFlakes = () => {
    let animationDelay = '0s';
    let fontSize = '14px';
    const arr = Array.from('Merry Christmas!!!');
    return arr.map((el, i) => {
      animationDelay = `${(Math.random() * 16).toFixed(2)}s`;
      fontSize = `${Math.floor(Math.random() * 10) + 10}px`;
      const style = {
        animationDelay,
        fontSize,
      };
      return <Snowflake key={i} style={style} />;
    });
  };
  
  return 
      <div className="snow-container">{makeSnowFlakes()}</div>
}
export default A

 

//src/snow.css

.snow-container {
  display: flex;
  justify-content: space-between;
}
.snow-flake {
  color: #b3cee0;
  animation: fall 3.5s linear infinite;
}
@keyframes fall {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translate(0, 200px);
    opacity: 0;
  }
}

 

 

 

 

다노샵에 눈이 와요!