body {
background-color: black;
color: white;
overflow: hidden;
}
.layout {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
position: relative;
}
.l-shape {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-start;
pointer-events: none;
z-index: -999;
}
.l-line {
position: absolute !important;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-bottom-left-radius: 100px;
position: relative;
overflow: hidden;
z-index: 1;
}
.l-line::after {
content: "";
position: absolute !important;
top: -30px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid var(--active-line-color);
border-bottom: 20px solid transparent;
border-bottom-left-radius: 100px;
animation: trace-border 1s ease-in-out forwards;
z-index: 2;
}
@keyframes trace-border {
0% {
height: 0;
width: 0;
border-bottom-color: transparent;
}
50% {
height: 100%;
width: 0;
border-bottom-color: transparent;
}
100% {
height: 100%;
width: 100%;
border-bottom-color: var(--active-line-color);
}
}
.layout[data-active-section="red"] {
--active-line-color: #D85140;
}
.layout[data-active-section="blue"] {
--active-line-color: #3555B4;
}
.layout[data-active-section="white"] {
--active-line-color: #E6E6E6;
}
.layout[data-active-section="yellow"] {
--active-line-color: #F6B90B;
}
.navbar {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px;
}
.navbar button {
background: none;
border: 1px solid white;
color: white;
padding: 10px 20px;
}
<body>
<div class="layout" data-active-section="red">
<div class="l-shape">
<div class="l-line"></div>
</div>
<nav class="navbar">
<button onclick="changeSection('red')">red</button>
<button onclick="changeSection('blue')">blue</button>
<button onclick="changeSection('white')">white</button>
<button onclick="changeSection('yellow')">yellow</button>
</nav>
</div>
<script>
function changeSection(section) {
const layout = document.querySelector(".layout");
const line = document.querySelector(".l-line");
layout.setAttribute("data-active-section", section);
const newLine = line.cloneNode(true);
line.parentNode.replaceChild(newLine, line);
}
</script>
</body>
SVGSMIL动画可能更容易，更短。
pathLength=100
jswc
stroke-dasharraystroke-dashoffset
const cPath = document.getElementById("cPath");
const animateBtn = document.getElementById("animateBtn");
const animation = cPath.animate(
[{ strokeDashoffset: 157 }, { strokeDashoffset: 0 }],
{
duration: 2000,
easing: "ease",
fill: "forwards"
}
);
animation.cancel();
animateBtn.addEventListener("click", function () {
animation.cancel();
animation.play();
});
。
#cPath {
stroke: #FF0000;
stroke-width: 7;
fill: none;
stroke-dasharray: 157;
stroke-dashoffset: 157;
}小型建议，您可能想添加一些动画序列，例如在现代网站中...好主意是使用某些动画库，例如。 GSAP。而且，在您的情况下，不要使用，因为这会打破