CSS动画效果

文字颜色渐变效果

.headClass{
        background-image: -webkit-linear-gradient(left, #0ee5ff, #f4ab20 50%, #0ee5ff 50%, #f4ab20 100%, #0ee5ff);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 3s infinite linear;
    }
 
@-webkit-keyframes masked-animation {
    0%  { background-position: 0 0;}
    100% { background-position: -100% 0;}
}

上下缓慢移动效果

//动效样式
@keyframes move{
  from{transform:translate(0,0)}
  to{transform:translate(0,5px)}
}

旋转效果

 
@keyframes rotate {
  0% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
 
animation: rotate 3s linear infinite;

动画延迟效果

animation-delay: 1s;