我在嘗試將 css 影片添加到導航標簽內的每個孩子時遇到問題
我正在嘗試創建一個移動的股票面板 奇怪的是,如果我添加另一個 css 屬性,如顏色,它確實可以作業
有誰知道如何解決這個問題
function DoAnimation(animation, a) {
var parent = a.parentElement
if (animation != null) {
parent.removeChild(a);
parent.appendChild(a);
console.log(1);
a.style.animationName = animation;
a.style.animationDuration = "2s";
}
}
@keyframes MoveStockTORIght {
from {
left: 0;
}
to {
transform: translateX(100px);
}
}
.SiteNav {
overflow: hidden;
text-align: center;
margin: auto;
text-align: center;
}
.SiteNav a {
gap: 10%;
padding: 1%;
}
<nav class="SiteNav" id="siteNavigantion">
<a href="StockPage.aspx?stock=MSFT" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a0">MSFT 294.23</a>
<a href="StockPage.aspx?stock=CLOV" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a1">CLOV 8.06</a>
<a href="StockPage.aspx?stock=LCID" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a2">LCID 22.87</a>
<a href="StockPage.aspx?stock=SAVA" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a3">SAVA 51.08</a>
<a href="StockPage.aspx?stock=AAL" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a4">AAL 20.13</a>
<a href="StockPage.aspx?stock=AMZN" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a5">AMZN 3246.3</a>
<a href="StockPage.aspx?stock=NFLX" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a6">NFLX 627.04</a>
<a href="StockPage.aspx?stock=GOOG" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a7">GOOG 2776.95</a>
<a href="StockPage.aspx?stock=AAPL" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a8">AAPL 142.81</a>
<a href="StockPage.aspx?stock=NVDA" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a9">NVDA 206.95</a>
</nav>
uj5u.com熱心網友回復:
為什么不直接使用 Marquee?
.SiteNav {
overflow: hidden;
text-align: center;
margin: auto;
text-align: center;
}
.SiteNav a {
gap: 10%;
padding: 1%;
}
marquee a { text-decoration: none; color:green; }
<marquee class="SiteNav" id="siteNavigantion">
<a href="StockPage.aspx?stock=MSFT" id="a0">MSFT 294.23</a>
<a href="StockPage.aspx?stock=CLOV" id="a1">CLOV 8.06</a>
<a href="StockPage.aspx?stock=LCID" id="a2">LCID 22.87</a>
<a href="StockPage.aspx?stock=SAVA" id="a3">SAVA 51.08</a>
<a href="StockPage.aspx?stock=AAL" id="a4">AAL 20.13</a>
<a href="StockPage.aspx?stock=AMZN" id="a5">AMZN 3246.3</a>
<a href="StockPage.aspx?stock=NFLX" id="a6">NFLX 627.04</a>
<a href="StockPage.aspx?stock=GOOG" id="a7">GOOG 2776.95</a>
<a href="StockPage.aspx?stock=AAPL" id="a8">AAPL 142.81</a>
<a href="StockPage.aspx?stock=NVDA" id="a9">NVDA 206.95</a>
</marquee>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/309934.html
標籤:javascript html css