diff --git a/src/pages/index.astro b/src/pages/index.astro index ba51ec0..5856bae 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -96,7 +96,7 @@ try {
-

联系我

+

联系我

@@ -540,6 +540,7 @@ try { --skew-angle: 15deg; --col1: var(--color-fg-0); --bg-width: 2rem; + --unit: calc(tan(var(--skew-angle)) * var(--height) * 0.5); height: var(--height); line-height: var(--height); @@ -547,24 +548,29 @@ try { grid-template-columns: auto 1fr; color: var(--color-bg-0); margin-block-end: 0.5em; + position: relative; & > .text { background-color: var(--color-fg-0); position: relative; + } + + & .animation-before { + width: calc(var(--unit) * 2); + position: absolute; + overflow: hidden; + height: 100%; + inset-inline-end: calc(var(--unit) * -2); + inset-block-start: 0; + &::after { content: ''; display: block; - position: absolute; - inset-inline-end: calc(tan(var(--skew-angle)) * var(--height) * -1); - inset-block-start: 0; + background-color: var(--col1); + width: 100%; height: 100%; - width: calc(tan(var(--skew-angle)) * var(--height)); - background-image: linear-gradient( - to left bottom, - transparent 50%, - var(--col1) 50% - ); + transform: skewX(var(--skew-angle)) translateX(calc(-1 * var(--unit))); } } @@ -584,7 +590,7 @@ try { background-size: var(--bg-width) 100%; animation: bg-contact-roll infinite linear 2s; transform: skewX(var(--skew-angle)) - translateX(calc(0.5 * tan(var(--skew-angle)) * var(--height) - 1px)); + translateX(calc(var(--unit) - 1px)); } }