css3实现动画匀速、反复、运行、呼吸灯效果、旋转、上下悬浮移动、hover文字动效

/* 呼吸灯效果、匀速、反复 */

animation: shine 1s linear 0s infinite alternate;

@keyframes shine {
   0%{
        opacity: 1;
    }      
    100%{
        opacity: 0;
    }      
    
}

 

/* 旋转效果、反复 */
animation: rotate 60s linear 0s infinite

@keyframes rotate {
   0%{
        transform: rotate(0)
    }      
    100%{
        transform: rotate(360deg);
    }      
    
}

/* 上下悬浮移动、反复 */
animation: float 2s linear 0s infinite;

@keyframes  float {
   0%,100%{
        transform: translateY(0);
    }      
    50%{
        transform: translateY(-146px);
    }      
    
}

 

/* hover文字动效 */
/*如a标签在hover变色*/

a {
 color:blue; 
} 
a:hover {
 color: red 
} 
a {
 transition: color .4s,background-color .4s; 
}