css3線性漸變添加過渡


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;
    }
  }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM