kudzues/qwerty-learner
1
0
Fork 0
mirror of https://github.com/RealKai42/qwerty-learner.git synced 2026-04-05 06:19:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add tada animation to coffee icon

Browse Source
This commit is contained in:
KaiyiWing
2023-04-25 11:52:32 +08:00
parent 150894bc5e
commit 2c06055552
3 changed files with 42 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

@@ -24,6 +24,7 @@
"romaji",
"svgr",
"tabler",
"tada",
"tailwindcss",
"trivago",
"ukphone",

39
src/pages/Typing/components/ResultScreen/index.module.css Normal file
View File

@@ -0,0 +1,39 @@
.img-shake {
animation: tada 1.5s ease-in-out 1s 4;
transition: background-color 0.1s ease-in-out;
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
fill: #818cf8;
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
animation-delay: 2s;
}
}

3
src/pages/Typing/components/ResultScreen/index.tsx
View File

@@ -3,6 +3,7 @@ import ShareButton from '../ShareButton'
import ConclusionBar from './ConclusionBar'
import RemarkRing from './RemarkRing'
import WordChip from './WordChip'
import styles from './index.module.css'
import redBookLogo from '@/assets/redBook-color-logo.svg'
import Tooltip from '@/components/Tooltip'
import { currentChapterAtom, currentDictInfoAtom, infoPanelStateAtom, randomConfigAtom } from '@/store'
@@ -176,7 +177,7 @@ const ResultScreen = () => {
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
className="h-5.5 w-5.5 fill-current text-gray-500 focus:outline-none dark:text-gray-400"
className={`h-5.5 w-5.5 fill-current text-gray-500 focus:outline-none dark:text-gray-400 ${styles.imgShake}`}
>
<path d="M96 64c0-17.7 14.3-32 32-32H448h64c70.7 0 128 57.3 128 128s-57.3 128-128 128H480c0 53-43 96-96 96H192c-53 0-96-43-96-96V64zM480 224h32c35.3 0 64-28.7 64-64s-28.7-64-64-64H480V224zM32 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
</svg>