我有以下代碼可以為background-position屬性設定影片，以便之后它“滑動”到不同的顏色。我目前的問題是如何扭轉它。我見過的大多數例子都在hover；這個雖然來自點擊事件的背景關系。任何想法如何在重新切換影片時反轉影片？
uj5u.com熱心網友回復：
問題出在 CSS 檔案中，試試這個：
#box {
width: 200px;
height: 100px;
background-size: 200% 100%;
background-image: linear-gradient(to right, red 50%, black 50%);
}
.slide-in {
animation: slide-in 0.5s forwards;
}
.slide-out {
animation: slide-out 0.5s forwards;
}
@keyframes slide-in {
100% {
background-position-x: -100%;
}
}
@keyframes slide-out {
0% {
background-position-x: 0%;
background-image: linear-gradient(to right, black 50%, red 50%);
}
100%{
background-position-x: 100%;
background-image: linear-gradient(to right, black 50%, red 50%);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/376403.html
標籤：javascript html css css动画
下一篇：從openpgp生成公鑰私鑰