Passthem/blog-frontend-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复锯齿问题
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
钟晓帕
2026-04-01 23:34:26 +08:00
parent b833065baf
commit 428be3170e
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/index.astro
View File

@ -96,7 +96,7 @@ try {
<Icon name="mdi:email" /> <Icon name="mdi:email" />
</div> </div>
<div class="contact-container"> <div class="contact-container">
<h1><div class="text">联系我</div><div class="animation"></div></h1> <h1><div class="text">联系我<div class="animation-before"></div></div><div class="animation"></div></h1>
<table> <table>
<tbody> <tbody>
<tr> <tr>
@ -540,6 +540,7 @@ try {
--skew-angle: 15deg; --skew-angle: 15deg;
--col1: var(--color-fg-0); --col1: var(--color-fg-0);
--bg-width: 2rem; --bg-width: 2rem;
--unit: calc(tan(var(--skew-angle)) * var(--height) * 0.5);
height: var(--height); height: var(--height);
line-height: var(--height); line-height: var(--height);
@ -547,24 +548,29 @@ try {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
color: var(--color-bg-0); color: var(--color-bg-0);
margin-block-end: 0.5em; margin-block-end: 0.5em;
position: relative;
& > .text { & > .text {
background-color: var(--color-fg-0); background-color: var(--color-fg-0);
position: relative; 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 { &::after {
content: ''; content: '';
display: block; display: block;
position: absolute; background-color: var(--col1);
inset-inline-end: calc(tan(var(--skew-angle)) * var(--height) * -1); width: 100%;
inset-block-start: 0;
height: 100%; height: 100%;
width: calc(tan(var(--skew-angle)) * var(--height)); transform: skewX(var(--skew-angle)) translateX(calc(-1 * var(--unit)));
background-image: linear-gradient(
to left bottom,
transparent 50%,
var(--col1) 50%
);
} }
} }
@ -584,7 +590,7 @@ try {
background-size: var(--bg-width) 100%; background-size: var(--bg-width) 100%;
animation: bg-contact-roll infinite linear 2s; animation: bg-contact-roll infinite linear 2s;
transform: skewX(var(--skew-angle)) transform: skewX(var(--skew-angle))
translateX(calc(0.5 * tan(var(--skew-angle)) * var(--height) - 1px)); translateX(calc(var(--unit) - 1px));
} }
} }