CSS-HTML GLOW RAIL BURK BURK ⇐ CSS

[Anonymous]

Unten ist das Design, in dem sich die Animation um die Karte bewegt. Das Problem ist, wenn das Licht nach links von der oberen linken Ecke steigt, weil die Ecke strahlend 80px hat. Kann mir jemand sagen, wie ich die Animationsreise auf die Schachtel bringen kann Grenze so, dass es in der oberen rechten Ecke sichtbar bleibt: < /p>

Code: Select all

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>
unten klebe ich die Animation ein, wenn Sie unter dem Code modifizieren können, der auch das funktioniert, was ich nicht an die obere Levt -Ecke gibt und die Animation um diese Ecke bewegt, anstatt zu fetzen.  Es verschwindet: < /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;}
}