조수연 / Find_your_own_personal_color

Go to a project
Toggle navigation Toggle navigation pinning
이수빈
85130f8a 1 parent 75a1840c

last

Inline Side-by-side
Showing 2 changed files with 0 additions and 52 deletions
import React from 'react';
import './Home.css?v=1.0';
import './snow.css';
const Snowflake = ({ style }) => {
return (
<p className="snow-flake" style={style}>
{"\u2745"}
</p>
);
};
const makeSnowFlakes = () => {
let animationDelay = "0.1s";
let fontSize = "14px";
const arr = Array.from("Merry Christmas");
return arr.map((el, i) => {
animationDelay = `${(Math.random() * 80).toFixed(100)}s`;
fontSize = `${Math.floor(Math.random() * 10) + 25}px`;
const style = {
animationDelay,
fontSize,
};
return <Snowflake key={i} style={style} />; });
};
const Home = ( { history } ) =>
{
......@@ -36,9 +7,6 @@ const Home = ( { history } ) =>
return (
<>
<div>
<div className="snow-container">
{makeSnowFlakes()}
</div>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
</head>
......
.snow-container{
display: flex;
justify-content: space-between;
}
.snow-flake {
color: rgb(255, 255, 255);
animation: fall 2.5s linear infinite;
}
@keyframes fall {
0% { opacity: 1;color: #ff7777; }
15% { opacity: 0.9;color: #ffa166; }
30% { opacity: 0.9;color: #ffd96f }
45% { opacity: 0.9;color: #8cff7d; }
60% { opacity: 0.9;color: #7cb7ff; }
75% { opacity: 0.9;color: #7d7dff; }
90% { opacity: 0.9;color: #a781ff; }
100% { transform: translate(0, 200px);
opacity: 0.3;color: #f280ff; }
}
\ No newline at end of file