background的 linear-gradient不支持animation以及transition,所以要想增加過渡效果,只能另想辦法,
目前想到的可以通過增加opacity屬性來實現,廢話不多說,直接上代碼,其中class中的up跟down代表不同方向的高亮:
.homecss .heyue_uls li .gradient_wrapper.up { opacity: 0; background: linear-gradient(45deg, #fcd2d2 0%, #fffafb 70%);(0%-70%實現漸變,70%之后不變顏色) animation: show_linear 1s linear; } .homecss .heyue_uls li .gradient_wrapper.down { opacity: 0; background: linear-gradient(45deg, #c7f9ee 0%, #fafffd 70%); animation: show_linear 1s linear; } @keyframes show_linear { (1s動畫中0%-80%為漸現,80%-100%為漸隱) 0% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 0; } }