From e9826e652b2d57a6a2f320ab2f928a26c8b1c7ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Fri, 6 May 2022 22:53:26 +0800 Subject: [PATCH] Add RSS hover animation. --- assets/css/style.css | 39 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/assets/css/style.css b/assets/css/style.css index 6907550..4606462 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -30,6 +30,43 @@ border-bottom: none; } -.rss-link a:hover { +/* .rss-link a:hover { font-weight: bold; +} */ +@keyframes wobble-vertical { + 16.65% { + transform: translateX(8px); + } + + 33.3% { + transform: translateX(-6px); + } + + 49.95% { + transform: translateX(4px); + } + + 66.6% { + transform: translateX(-2px); + } + + 83.25% { + transform: translateX(1px); + } + + 100% { + transform: translateX(0); + } +} + +.rss-link a:hover { + animation-name: wobble-vertical; + animation-duration: 2s; + animation-timing-function: ease-in-out; + animation-iteration-count: 1; +} + +.rss-link a:hover > i { + -webkit-transform: scaleY(-1); + transform: scaleY(-1); } \ No newline at end of file