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

 

posted @ 2018-09-06 18:55  LAM_BLOG  阅读(1694)  评论(0编辑  收藏  举报