CSS3 filter

filter：定义了元素的可视效果
具体函数：
hue-rotate() 色相旋转
blur() 高斯模糊效果
brightness() 图片变亮
contrast() 图像的对比度
grayscale() 灰度
invert(）反转
opacity() 透明度
saturate() 饱和度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 filter</title>
</head>
<style type="text/css">
    body,html{
        display: flex;
        align-items:center;
        justify-content:center;
         100%;
        height: 100%;
        background: linear-gradient(#E0FFFF 0,     #696969 100%);
        margin:0;
    }
    .wrap{
        display: flex;
        flex-wrap: wrap;
    }
    .wrap div{
         15vw;
        height:15vw;
        margin:10px;
        border-radius: 50%;
        background: linear-gradient(#FFFFF0 0,    #F0E68C 25%, #FFA500 50%,#FF8C00 75%,     #D2691E 100%);
        -webkit-animation: sun 10s ease-in-out infinite 5s;
                  animation: sun 10s ease-in-out infinite 5s;
    }
    .wrap div:nth-child(2){
        -webkit-animation: sun1 10s ease-in-out infinite 5s;
                  animation: sun1 10s ease-in-out infinite 5s;
    }
    .wrap div:nth-child(3){
        -webkit-animation: sun2 10s ease-in-out infinite 5s;
                  animation: sun2 10s ease-in-out infinite 5s;
    }
    .wrap div:nth-child(4){
        -webkit-animation: sun3 10s ease-in-out infinite 5s;
                  animation: sun3 10s ease-in-out infinite 5s;
    }
    .wrap div:nth-child(5){
        -webkit-animation: sun4 10s ease-in-out infinite 5s;
                  animation: sun4 10s ease-in-out infinite 5s;
    }
    .wrap div:nth-child(6){
        -webkit-animation: sun5 10s ease-in-out infinite 5s;
                  animation: sun5 10s ease-in-out infinite 5s;
    }
    .wrap div:nth-child(7){
        -webkit-animation: sun6 10s ease-in-out infinite 5s;
                  animation: sun6 10s ease-in-out infinite 5s;
    }
    .wrap div:nth-child(8){
        -webkit-animation: sun7 10s ease-in-out infinite 5s;
                  animation: sun7 10s ease-in-out infinite 5s;
    }
    .wrap div:nth-child(9){
        -webkit-animation: sun8 10s ease-in-out infinite 5s;
                  animation: sun8 10s ease-in-out infinite 5s;
    }
    .wrap div:nth-child(10){
        -webkit-animation: sun9 10s ease-in-out infinite 5s;
                  animation: sun9 10s ease-in-out infinite 5s;
    }
    @keyframes sun {
      0% {
        -webkit-filter: hue-rotate(360deg);
                filter: hue-rotate(360deg);
      }
      100% {
        -webkit-filter: hue-rotate(0deg);
                filter: hue-rotate(0deg);
      }
    }
    @keyframes sun1 {
      0% {
        -webkit-filter: blur(15px);
                filter: blur(15px);
      }
      100% {
        -webkit-filter: blur(0px);;
                filter: blur(0px);;
      }
    }
    @keyframes sun2 {
      0% {
        -webkit-filter: brightness(200%);
                filter: brightness(200%);
      }
      100% {
        -webkit-filter: brightness(0%);
                filter: brightness(0%);
      }
    }
    @keyframes sun3 {
      0% {
        -webkit-filter: contrast(200%);
                filter: contrast(200%);
      }
      100% {
        -webkit-filter: contrast(0%);
                filter: contrast(0%);
      }
    }
    @keyframes sun4 {
      0% {
        -webkit-filter: grayscale(100%);
                filter: grayscale(100%);
      }
      100% {
        -webkit-filter: grayscale(0%);
                filter: grayscale(0%);
      }
    }
    @keyframes sun5 {
      0% {
        -webkit-filter: invert(100%);
                filter: invert(100%);
      }
      100% {
        -webkit-filter: invert(0%);
                filter: invert(0%);
      }
    }
    @keyframes sun6 {
      0% {
        -webkit-filter: opacity(100%);
                filter: opacity(100%);
      }
      100% {
        -webkit-filter: opacity(0%);
                filter: opacity(0%);
      }
    }
    @keyframes sun7 {
      0% {
        -webkit-filter: saturate(100%);
                filter: saturate(100%);
      }
      100% {
        -webkit-filter: saturate(0%);
                filter: saturate(0%);
      }
    }
    @keyframes sun8 {
      0% {
        -webkit-filter: sepia(100%);
                filter: sepia(100%);
      }
      100% {
        -webkit-filter: sepia(0%);
                filter: sepia(0%);
      }
    }
    @keyframes sun9 {
      0% {
        -webkit-filter: drop-shadow(8px 8px 10px #F0E68C);;
                filter: drop-shadow(8px 8px 10px #F0E68C);;
      }
      100% {
        -webkit-filter: drop-shadow(8px 8px 10px #FFDEAD);;
                filter: drop-shadow(8px 8px 10px #FFDEAD);;
      }
    }
</style>
<body>
    <div class="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>