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

[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()
< /code>
Ниже я вставлю анимацию, если вы можете модернизировать ниже кода, который также будет работать то, что я не даю, просто придает в верхний угол левта и заставить анимацию перемещаться по этому поводу вместо фиттинга Это исчезает: < /p>





body{
background: #222;
margin: 0;
}
.holder{
/*approx center*/
position: absolute;
top: 45%;
left: 45%;
}

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


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