|
Сообщение от рони
|
|
пробовал,
|
misha.korolcov,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.leverate-rates-animated-row{
display: flex; white-space: nowrap;
}
.container-fluid{
height:150px;
overflow: hidden;
white-space: nowrap;
display: flex;
overflow: hidden;
}
.container-fluid > div {
min-width: 100%;
will-change: transform;
animation: text-display var(--text-display-duration, 30s) linear infinite;
animation-direction: inherit;
display: flex;
flex: 1 0 auto;
text-align: center;
}
@keyframes text-display {
to {
transform: translateX(-100%);
}
}
</style>
<section class="company-market-trades">
<div class="container-fluid" >
<div class="company-events leverate-rates-ticker-container leverate-ticker-dark" id="company-market-trades">
<div class="sirix-ticker-logo-wrapper">
<div class="sirix-ticker-logo"></div>
</div>
<div class="leverate-rates-animated-row leverate-clearfix" >
<div class="leverate-rates-item" >
<div class="leverate-item-symbol-icon"><img alt="" src="https://widget.forexwebservices.com/InstrumentsImage/GetImage/?instrumentName=TIN"></div>
<div class="leverate-item-arrow leverate-arrow-up"></div>
<div class="leverate-item-symbol">TIN</div>
<div class="leverate-item-rate"><span class="leverate-item-bid">16705</span> / <span class="leverate-item-ask">16735</span></div>
</div>
<div class="leverate-rates-item" style="">
<div class="leverate-item-symbol-icon"><img alt="" src="https://widget.forexwebservices.com/InstrumentsImage/GetImage/?instrumentName=LEAD"></div>
<div class="leverate-item-arrow leverate-arrow-up"></div>
<div class="leverate-item-symbol">LEAD</div>
<div class="leverate-item-rate"><span class="leverate-item-bid">221<span style="font-size:1.167em;font-weight:bold;">7.</span><span style="font-size:0.833em;">5</span></span> / <span class="leverate-item-ask">2218</span></div>
</div>
<div class="leverate-rates-item" style="">
<div class="leverate-item-symbol-icon"><img alt="" src="https://widget.forexwebservices.com/InstrumentsImage/GetImage/?instrumentName=TADAWUL"></div>
<div class="leverate-item-arrow leverate-arrow-down"></div>
<div class="leverate-item-symbol">TADAWUL</div>
<div class="leverate-item-rate"><span class="leverate-item-bid">7876.<span style="font-size:1.167em;font-weight:bold;">68</span></span> / <span class="leverate-item-ask">7876.<span style="font-size:1.167em;font-weight:bold;">68</span></span></div>
</div>
<div class="leverate-rates-item" style="">
<div class="leverate-item-symbol-icon"><img alt="" src="https://widget.forexwebservices.com/InstrumentsImage/GetImage/?instrumentName=ISE100"></div>
<div class="leverate-item-arrow leverate-arrow-down"></div>
<div class="leverate-item-symbol">ISE100</div>
<div class="leverate-item-rate"><span class="leverate-item-bid">99153.<span style="font-size:1.167em;font-weight:bold;">48</span></span> / <span class="leverate-item-ask">99153.<span style="font-size:1.167em;font-weight:bold;">48</span></span></div>
</div>
</div>
</div>
</div>
</section>
<script>
addEventListener("DOMContentLoaded", () => {
const parent = document.querySelector("#company-market-trades");
parent.parentNode.append(parent.cloneNode(true))
});
</script>
</body>
</html>
