记css3：大屏可视化一些常用效果

 

（1）旋转效果

@keyframes rotate {
  0% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}

animation: rotate 3s linear infinite;

 

（2）上下移动效果

@keyframes move{
  from{transform:translate(0,0)}
  to{transform:translate(0,5px)}
}

animation: move 0.8s ease-in-out 1s infinite alternate;

 

（3）文字渐变颜色

<h1 class="home-title">
  <span>运维监管系统大数据展示</span>
</h1>

.home-title{
  text-align: center;
  padding: 10px 0 0;
  span{
    font-size: 28px;
    background-image: linear-gradient(0deg, #5EC6DA, #F4FCFB);
    /*linear-gradient(to bottom, rgba(79,255,215,1), rgba(79,255,215,0));*/
    -webkit-background-clip:text;
    color: transparent;
  }
}

（4）动画延迟

animation-delay: 1s;
-webkit-animation-delay: 1s; /* Safari 和 Chrome */

 

未完待续。。。