Функция со стрелкой вправо ⇐ CSS

[Anonymous]

belo - моя функция Python, созданная с помощью Python html. Хотите добавить эту анимацию в таблицу HTML, но проблема в том, что она создает много белого пространства, а также дизайн функции не так, как ожидается. Может ли кто -нибудь сказать мне, как я могу изменить этот фанктор, чтобы сделать дизайн длинным и менее белым пространством: < /p>
def create_chevron_animation2(background_color="#06D001", height="50px"):
css_chevron = f"""

.container {{
display: flex;
justify-content: center;
align-items: center;
width: 100%; /* Increased width to 150% */
height: {height}; /* Reduced height */
position: relative;
overflow: hidden;
font-size: 0;
}}

.chevron {{
--chevron-size: 30px;
position: absolute;
width: calc(var(--chevron-size) * 4.0 * 0.5);
height: calc(var(--chevron-size) * 0.4 * 1.0);
font-size: var(--chevron-size);
opacity: 0;
transform: scale(0.1) rotate(90deg);
animation: move-chevron 5s linear infinite;
}}

.chevron:nth-child(1) {{ animation-delay: 0.5s; }}
.chevron:nth-child(2) {{ animation-delay: 1.0s; }}
.chevron:nth-child(3) {{ animation-delay: 1.5s; }}
.chevron:nth-child(4) {{ animation-delay: 2s; }}
.chevron:nth-child(5) {{ animation-delay: 2.5s; }}
.chevron:nth-child(6) {{ animation-delay: 3s; }}
.chevron:nth-child(7) {{ animation-delay: 3.5s; }}
.chevron:nth-child(8) {{ animation-delay: 4s; }}
.chevron:nth-child(9) {{ animation-delay: 4.5s; }}
.chevron:nth-child(10) {{ animation-delay: 5.0s; }}
.chevron:before,
.chevron:after {{
content: '';
position: absolute;
top: 0;
height: 100%;
width: 50%;
background: {background_color};
}}

.chevron:before {{
left: 0;
transform: skewY(-60deg);
}}

.chevron:after {{
right: 0;
transform: skewY(60deg);
}}

@keyframes move-chevron {{
0% {{
opacity: 0;
transform: translateX(-10%) scale(0.1) rotate(90deg);
}}
20% {{
opacity: 1;
transform: translateX(calc(0.6rem * 10)) scale(1) rotate(90deg);
}}
60% {{
opacity: 1;
transform: translateX(calc(0.6rem * 20)) scale(1) rotate(90deg);
}}
100% {{
opacity: 0;
transform: translateX(calc(0.6rem * 30)) scale(0.5) rotate(90deg);
}}
}}

"""

html_chevron = """




"""
< /code>
Это то, что я ожидаю внутри таблицы HTML в Streamlit: < /p>





$base: 0.6rem;

.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}

.chevron {
position: absolute;
width: calc(#{$base} * 2.5);
height: calc(#{$base} * 0.3);
opacity: 0;
transform: scale(0.1) rotate(90deg); /* Rotate to point right */
animation: move-chevron 5s linear infinite; /* Smooth animation */
}

.chevron:nth-child(1) {
animation-delay: 0s;
}

.chevron:nth-child(2) {
animation-delay: 0.5s;
}

.chevron:nth-child(3) {
animation-delay: 1s;
}

.chevron:nth-child(4) {
animation-delay: 1.5s;
}

.chevron:nth-child(5) {
animation-delay: 2s;
}

.chevron:nth-child(6) {
animation-delay: 2.5s;
}

.chevron:nth-child(7) {
animation-delay: 3s;
}

.chevron:nth-child(8) {
animation-delay: 3.5s;
}

.chevron:nth-child(9) {
animation-delay: 4s;
}

.chevron:nth-child(10) {
animation-delay: 4.5s;
}

.chevron:before,
.chevron:after {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 50%;
background: green; /* Uncommented and added the background */
}

.chevron:before {
left: 0;
transform: skewY(-60deg); /* Flip the skew to point right */
}

.chevron:after {
right: 0;
transform: skewY(60deg); /* Flip the skew to point right */
}

@keyframes move-chevron {
0% {
opacity: 0;
transform: translateX(-10%) scale(0.1) rotate(90deg);
}
20% {
opacity: 1;
transform: translateX(calc(#{$base} * 10)) scale(1) rotate(90deg);
}
60% {
opacity: 1;
transform: translateX(calc(#{$base} * 20)) scale(1) rotate(90deg);
}
100% {
opacity: 0;
transform: translateX(calc(#{$base} * 30)) scale(0.5) rotate(90deg);
}
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... amlit-html