- Dapatkan pautan
- X
- E-mel
- Apl Lain
Demo (contoh)
HTML view ▼
<div class="labu">
<div class="labi">
<svg class="text-stroke" viewBox="0 0 500 100" width="100%" height="100%">
<text class="text" x="20" y="75">Orandableg's</text>
</svg>
</div>
<button class="reset">Ulang</button>
</div>
<style>
.labu *,
.labu *::before,
.labu *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.labu {
block-size: 30vh;
display: grid;
place-content: center;
gap: 1rem;
font-family: Georgia;
background-color: #cfe2f3;
border-radius: 12px;
}
.labi {
display: flex;
justify-content: center;
block-size: min(10rem, 23vw);
min-inline-size: 22.5rem;
}
.text-stroke {
font-size: 72px;
letter-spacing: 1px;
fill: none;
stroke: #000;
stroke-width: 2;
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: textStrokeAnim 5000ms linear both;
animation-iteration-count: 1;
}
.reset {
width: max-content;
margin-inline: auto;
padding: 0.5em 1.25em;
font-size: 1.4rem;
border-radius: 1rem;
border: 0;
position: relative;
background-color: #fce5cd;
color: #555;
}
.reset::after,
.reset::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
transition: all 66ms ease;
}
.reset::after {
box-shadow: 0 0.25rem 0.5rem #0003, -0.124rem 0.5rem 0.45rem #0002;
opacity: 1;
}
.reset::before {
box-shadow: inset 0 1px 0.5px 0px #777, inset 0 -2px 0.5px 0px #fff9,
inset 0 4px 10px 0px #0007, inset 0 -4px 16px 0px #fff7;
opacity: 0;
}
.reset:focus-visible {
outline: 2px solid #0ebeff;
outline-offset: 1px;
}
.reset:active {
scale: 0.98;
}
.reset:is(:active, :focus-visible)::after {
opacity: 0;
}
.reset:active::before {
opacity: 1;
}
@keyframes textStrokeAnim {
0% {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
fill: #0000;
}
95% {
stroke-dasharray: 0%;
stroke-dashoffset: 90%;
fill: #0000;
}
100% {
stroke-dasharray: 0%;
stroke-dashoffset: 0%;
fill: #f9cb9c;
filter: drop-shadow(2px 2px 10px #0007);
}
}
</style>
<script>
const restartButton = document.querySelector(".reset");
restartButton.addEventListener(
"click",
() => {
const textAnimation = document.querySelector(".text-stroke");
setAnimationName(textAnimation, "none");
requestAnimationFrame(() =>
setTimeout(() => setAnimationName(textAnimation, ""), 0)
);
},
false
);
const setAnimationName = (element, animationName) => {
if (element) {
element.style.animationName = animationName;
}
};
</script>
<div class="labi">
<svg class="text-stroke" viewBox="0 0 500 100" width="100%" height="100%">
<text class="text" x="20" y="75">Orandableg's</text>
</svg>
</div>
<button class="reset">Ulang</button>
</div>
<style>
.labu *,
.labu *::before,
.labu *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.labu {
block-size: 30vh;
display: grid;
place-content: center;
gap: 1rem;
font-family: Georgia;
background-color: #cfe2f3;
border-radius: 12px;
}
.labi {
display: flex;
justify-content: center;
block-size: min(10rem, 23vw);
min-inline-size: 22.5rem;
}
.text-stroke {
font-size: 72px;
letter-spacing: 1px;
fill: none;
stroke: #000;
stroke-width: 2;
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: textStrokeAnim 5000ms linear both;
animation-iteration-count: 1;
}
.reset {
width: max-content;
margin-inline: auto;
padding: 0.5em 1.25em;
font-size: 1.4rem;
border-radius: 1rem;
border: 0;
position: relative;
background-color: #fce5cd;
color: #555;
}
.reset::after,
.reset::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
transition: all 66ms ease;
}
.reset::after {
box-shadow: 0 0.25rem 0.5rem #0003, -0.124rem 0.5rem 0.45rem #0002;
opacity: 1;
}
.reset::before {
box-shadow: inset 0 1px 0.5px 0px #777, inset 0 -2px 0.5px 0px #fff9,
inset 0 4px 10px 0px #0007, inset 0 -4px 16px 0px #fff7;
opacity: 0;
}
.reset:focus-visible {
outline: 2px solid #0ebeff;
outline-offset: 1px;
}
.reset:active {
scale: 0.98;
}
.reset:is(:active, :focus-visible)::after {
opacity: 0;
}
.reset:active::before {
opacity: 1;
}
@keyframes textStrokeAnim {
0% {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
fill: #0000;
}
95% {
stroke-dasharray: 0%;
stroke-dashoffset: 90%;
fill: #0000;
}
100% {
stroke-dasharray: 0%;
stroke-dashoffset: 0%;
fill: #f9cb9c;
filter: drop-shadow(2px 2px 10px #0007);
}
}
</style>
<script>
const restartButton = document.querySelector(".reset");
restartButton.addEventListener(
"click",
() => {
const textAnimation = document.querySelector(".text-stroke");
setAnimationName(textAnimation, "none");
requestAnimationFrame(() =>
setTimeout(() => setAnimationName(textAnimation, ""), 0)
);
},
false
);
const setAnimationName = (element, animationName) => {
if (element) {
element.style.animationName = animationName;
}
};
</script>
Catatan oleh
Orandableg
- Dapatkan pautan
- X
- E-mel
- Apl Lain
Ulasan