조수연 / Find_your_own_personal_color

Go to a project
Toggle navigation Toggle navigation pinning
이수빈
25f8fb30 1 parent 992beee5

애니메이션 추가

Expand all
Inline Side-by-side
Showing 9 changed files with 115 additions and 28 deletions
This diff is collapsed. Click to expand it.
......@@ -12337,6 +12337,36 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-native-svg": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-12.1.0.tgz",
"integrity": "sha512-1g9qBRci7man8QsHoXn6tP3DhCDiypGgc6+AOWq+Sy+PmP6yiyf8VmvKuoqrPam/tf5x+ZaBT2KI0gl7bptZ7w==",
"requires": {
"css-select": "^2.1.0",
"css-tree": "^1.0.0-alpha.39"
},
"dependencies": {
"css-tree": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
"integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==",
"requires": {
"mdn-data": "2.0.14",
"source-map": "^0.6.1"
}
},
"mdn-data": {
"version": "2.0.14",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
}
}
},
"react-reconciler": {
"version": "0.25.1",
"resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.25.1.tgz",
......
......@@ -11,6 +11,7 @@
"react": "^17.0.1",
"react-console": "^1.0.0-rc.2",
"react-dom": "^17.0.1",
"react-native-svg": "^12.1.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-transition-group": "^4.4.1",
......
......@@ -27,12 +27,10 @@ body
{
border: none;
border-radius: 45px;
width: 140px;
height: 45px;
width: 150px;
height: 70px;
color:rgb(255, 255, 255);
justify-content: center;
align-items: center;
text-align: center;
font-family: 'button';
text-transform: uppercase;
letter-spacing: 2.5px;
......@@ -41,24 +39,33 @@ body
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
font-size: 20px;
font-size: 50px;
background-color: rgba(255, 255, 255, 0);
}
#btn_group button
{
/* border: 1px;
color:rgb(255, 255, 255);
padding: 30px;
align-items: center;
text-align: center;
font-size: 40px;
background-color: rgba(255,255,255,0.5);*/
bottom: 30%;
}
#btn_group button:hover
{
background-color: hsl(253, 100%, 16%);
background-color: rgb(255, 255, 255);
box-shadow: 0px 15px 20px #2f016466;
color: #fff;
transform: translateY(-7px);
}
\ No newline at end of file
button:hover, button:focus
{ animation-duration: 3s; animation-name: rainbow; animation-iteration-count: infinite; }
@keyframes rainbow
{
0% { color: #ff6060; }
15% { color: #ffa166; }
30% { color: #ffd96f }
45% { color: #8cff7d; }
60% { color: #7cb7ff; }
75% { color: #7d7dff; }
90% { color: #a781ff; }
100% { color: #f280ff; }
}
\ No newline at end of file
......
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 } ) =>
......@@ -7,7 +35,10 @@ const Home = ( { history } ) =>
return (
<>
<div id>
<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>
......@@ -16,7 +47,7 @@ const Home = ( { history } ) =>
<div className='animated fadeInDown'>findyourcolor</div>
</center>
<div id="btn_group">
<button id="soo_btn2" onClick={ () => {history.push("/test")}}>test</button>
<button id="soo_btn2" onClick={ () => {history.push("/test")}}>test</button>
</div>
</div>
</div>
......
......@@ -7,12 +7,16 @@
#season_class
{
text-align: center;
width: auto;
height: auto;
padding: auto;
border: auto;
}
.img
{
width: 100px;
height: 150px;
object-fit: cover;
justify-content: center;
align-items: center;
}
@font-face
{
......@@ -23,10 +27,4 @@
{
font-family: "button";
src: url("Monday Monkey.ttf");
}
#back_btn
{
}
#btn_back
{
}
\ No newline at end of file
......
.snow-container{
display: flex;
justify-content: space-between;
}
.snow-flake {
color: rgb(255, 255, 255);
animation: fall 3.0s 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
......@@ -10,7 +10,7 @@
{
border: 1px;
color:rgb(255, 255, 255);
padding: 10px;
padding: 15px;
align-items: center;
text-align: center;
font-size: 40px;
......@@ -80,8 +80,8 @@
background-image : url("https://source.unsplash.com/random/1920x1080/?color");
background-size : cover;
background-repeat : no-repeat;
padding: 12%;
text-align: center!important;
padding: 20%;
text-align: center;
line-height: 100px;
font-family: "Q";
}
......
......@@ -6,7 +6,7 @@ const Winter = ( { history } ) =>
{
return (
<div className='season_class'>
<img src = {winter} width='1300' height='600' alt = "winter"/>
<img src = {winter} alt = "winter"/>
<div id="btn_back">
<button id="back_btn" onClick={ () => {history.push("/")}}>back</button>
</div>
......