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

feat: add default image

Browse Source
This commit is contained in:
Tristan 2019-09-15 00:39:28 +08:00
parent abbd438026
commit 8d762f3337
4 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/figure/default.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
public/figure/yu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

2
src/assets/colors.json
View File

@ -303,7 +303,7 @@
{ "hex": "#88ada6", "name": "水色", "intro": "" },
{ "hex": "#f3d3e7", "name": "水红", "intro": "" },
{ "hex": "#d4f2e7", "name": "水绿", "intro": "" },
{ "hex": "#d2f0f4", "name": "水蓝", "intro": "" },
{ "hex": "#d2f0f4", "name": "水蓝", "intro": "", "figure": "yu.png?width=17rem" },
{ "hex": "#d3e0f3", "name": "淡青", "intro": "" },
{ "hex": "#30dff3", "name": "湖蓝", "intro": "", "figure": "moon.png" },
{

40
src/components/Preview.js
View File

@ -5,16 +5,40 @@ import Download from './DownloadBtn';
import IconClose from './IconClose';
import BodyBg from '../assets/img/bg.texture.png';
const FadeIn = keyframes`
from {
const BounceInDown = keyframes`
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transform: scale(0.96) translate3d(0, -3000px, 0);
transform: scale(0.96) translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: scale(0.96) translate3d(0, 25px, 0);
transform: scale(0.96) translate3d(0, 25px, 0);
}
75% {
-webkit-transform: scale(0.96) translate3d(0, -10px, 0);
transform: scale(0.96) translate3d(0, -10px, 0);
}
90% {
-webkit-transform: scale(0.96) translate3d(0, 5px, 0);
transform: scale(0.96) translate3d(0, 5px, 0);
}
to {
opacity: 1;
-webkit-transform: scale(0.96) translate3d(0, 0, 0);
-webkit-transform: scale(0.96) translate3d(0, 0, 0);
transform: scale(0.96) translate3d(0, 0, 0);
}
`;
@ -34,7 +58,7 @@ const Wrapper = styled.section`
width: 100%;
height: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
animation: ${FadeIn} 1s;
animation: ${BounceInDown} 1s;
animation-fill-mode: both;
&.starting {
animation: none;
@ -86,7 +110,7 @@ const Wrapper = styled.section`
}
`;
const Preview = ({ name, pinyin, color, figure = '', closePreview }) => {
const Preview = ({ name, pinyin, color, figure = 'default.png?width=8rem', closePreview }) => {
console.log('ffff', figure);
const params = new URLSearchParams(figure.split('?')[1] || '');
const figureW = params.get('width') || '23rem';