mirror of
https://github.com/ArthurDanjou/artsite.git
synced 2026-01-14 15:54:13 +01:00
37 lines
844 B
Vue
37 lines
844 B
Vue
<script setup lang="ts">
|
|
const styleVars = {
|
|
'--animated-speed': '50s'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
class="inline-block font-bold animate-gradient"
|
|
:style="styleVars"
|
|
>
|
|
<slot>Arthur Danjou</slot>
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.animate-gradient {
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
#f43f5e, #f97316, #f59e0b, #eab308, #84cc16, #22c55e,
|
|
#10b981, #14b8a6, #06b6d4, #0ea5e9, #3b82f6, #6366f1,
|
|
#8b5cf6, #a855f7, #d946ef, #ec4899, #f43f5e
|
|
);
|
|
background-size: 1400% auto;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: gradient-animation var(--animated-speed) linear infinite;
|
|
}
|
|
|
|
@keyframes gradient-animation {
|
|
0% { background-position: 0% center; }
|
|
100% { background-position: 200% center; }
|
|
}
|
|
</style>
|