旋转

.rotate {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 100px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: rotates 3s infinite linear;
    -webkit-animation: rotates 3s infinite linear;
}
@keyframes rotates {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotates {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

闪烁

.glint {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 100px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-animation:glint 1.5s infinite;
    animation:glint 1.5s infinite;
}
@-webkit-keyframes glint{
    0%{opacity:1}
    50%{opacity:0}
    100%{opacity:1}
}
@keyframes glint{
    0%{opacity:1}
    50%{opacity:0}
    100%{opacity:1}
}

渐显

.fade {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 100px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-animation:fade-in 1.5s infinite;
    /* infinite 是为了让其在本页中效果更明显 */
    /* 搞的跟闪烁效果差不多了 233 */
    animation:fade-in 1.5s infinite;
}
@keyframes fade-in{
    0%{opacity:.1}
    20%{opacity:.2}
    30%{opacity:.3}
    40%{opacity:.4}
    50%{opacity:.5}
    60%{opacity:.6}
    70%{opacity:.7}
    80%{opacity:.8}
    90%{opacity:.9}
    100%{opacity:1}
}
@-webkit-keyframes fade-in{
    0%{opacity:.1}
    20%{opacity:.2}
    30%{opacity:.3}
    40%{opacity:.4}
    50%{opacity:.5}
    60%{opacity:.6}
    70%{opacity:.7}
    80%{opacity:.8}
    90%{opacity:.9}
    100%{opacity:1}
}

变色

.discolor {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 100px !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-animation:discolors 3s infinite;
    animation:discolors 3s infinite;
}
@-webkit-keyframes discolors{
    0%{-webkit-filter:saturate(.1)}
    50%{-webkit-filter:saturate(3)}
    100%{-webkit-filter:saturate(5)}
}
@keyframes discolors{
    0%{filter:saturate(.1)}
    50%{filter:saturate(3)}
    100%{filter:saturate(5)}
}

推荐使用谷歌浏览器。

To be continued ...