mirror/chinese-colors
2
0
Fork 1
mirror of https://github.com/zerosoul/chinese-colors.git synced 2024-12-03 04:59:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add animate to poetry

Browse Source
This commit is contained in:
Tristan 2019-09-22 11:15:29 +08:00
parent 2b1298a4cb
commit d9103aadc4
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ColorTitle/Poetry.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import styled from 'styled-components';
import { useMobile } from '../../hooks';
import FadeInDown from '../animates/FadeInDown';
const Wrapper = styled.div`
display: flex;
font-size: 0.6rem;
@ -9,6 +10,7 @@ const Wrapper = styled.div`
margin-top: 1rem;
/* background: rgba(33, 33, 33, 0.6); */
text-shadow: 0 0 4px rgba(33, 33, 33, 0.6);
animation: ${FadeInDown} 1s forwards;
&.mobile {
font-size: 0.8rem;
}

4
src/components/animates/FadeInDown.js
View File

@ -3,12 +3,12 @@ import { keyframes } from 'styled-components';
const FadeInDown = keyframes`
from {
opacity: 0;
transform: translate3d(0, -400%, 0);
transform: translate3d(0, -20%, 0);
}
to {
opacity: 1;
transform: translate3d(0, -250%, 0);
transform: translate3d(0, 0, 0);
}
`;
export default FadeInDown;