diff --git a/src/assets/svg/arrow_down.svg b/src/assets/svg/arrow_down.svg new file mode 100644 index 0000000..d173a49 --- /dev/null +++ b/src/assets/svg/arrow_down.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/src/components/home/welcome.vue b/src/components/home/welcome.vue index 8a8594a..940bfe1 100644 --- a/src/components/home/welcome.vue +++ b/src/components/home/welcome.vue @@ -15,6 +15,10 @@ + +
+ +
@@ -26,6 +30,7 @@ import mailSvg from '@/assets/img/mail.svg'; import lineImg from '@/assets/img/line.png'; import githubSvg from '@/assets/img/github.svg'; + import arrowSvg from '@/assets/svg/arrow_down.svg'; const i18n = useI18n(); @@ -106,4 +111,26 @@ flex-direction: row; } +#scroll_arrow{ + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 40px; + height: 65px; + bottom: 5%; + animation-name: arrow_floating; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-direction: alternate; +} +#scroll_arrow img{ + width: 100%; + height: 100%; +} + +@keyframes arrow_floating { + from {bottom:5%;} + to {bottom: 8%;} +} + \ No newline at end of file