CSS-HTML Glow Ray Bend сверху слева ⇐ Html

[Anonymous]

Ниже приведен дизайн, в котором анимация перемещается вокруг карты, проблема заключается в том, когда свет достигает верхнего левого угла, он исчезает, потому что у угло граница так, чтобы он оставался видимым в правом верхнем углу: < /p>
def display_animated_box(width: int = 450, height: int = 480):
"""
Displays an animated box with a card-like shape, featuring customizable dimensions in a Streamlit app.

Args:
width (int): The width of the animated box in pixels.
height (int): The height of the animated box in pixels.
"""
html_content = f"""






.holder {{
position: relative;
width: {width}px;
height: {height}px;
background: var(--clr);
border-radius: 10px;
border-top-left-radius: 80px;
overflow: hidden;
}}
.bar {{
background: #d0f0dd;
box-shadow: 0px 0px 0 #40ff22,
0px 0px 4px #30ff1f,
0px 0px 8px #20ff1b,
0px 0px 16px #10ff18;
position: absolute;
}}
.left {{
width: 4px;
animation: left 10s linear infinite;
}}
@keyframes left {{
0% {{height: 0; top: {height - 4}px; left: 0;}}
20% {{height: {height}px; top: 0; left: 0;}}
40% {{height: 0; top: 0; left: 0;}}
}}
.top {{
height: 4px;
animation: top 10s linear infinite;
}}
@keyframes top {{
0% {{width: 0; top: 0; left: 0;}}
20% {{width: 0; top: 0; left: 0;}}
40% {{width: {width}px; top: 0; left: 0;}}
60% {{width: 0; top: 0; left: {width}px;}}
}}
.right {{
width: 4px;
animation: right 10s linear infinite;
}}
@keyframes right {{
0% {{height: 0; top: 0; left: {width - 4}px;}}
40% {{height: 0; top: 0; left: {width - 4}px;}}
60% {{height: {height}px; top: 0; left: {width - 4}px;}}
80% {{height: 0; top: {height}px;left: {width - 4}px;}}
}}
.bottom {{
height: 4px;
animation: bottom 10s linear infinite;
}}
@keyframes bottom {{
0% {{width: 0; top: {height - 4}px; left: {width - 4}px;}}
60% {{width: 0; top: {height - 4}px; left: {width - 4}px;}}
80% {{width: {width}px; top: {height - 4}px; left: 0;}}
100% {{width: 0; top: {height - 4}px; left: 0;}}
}}

"""
st.html(html_content)

display_animated_box()


Подробнее здесь: https://stackoverflow.com/questions/794 ... n-top-left