SVG+CSS3发型染色改变动画

Hair Color Change SVG + Scss Animation

svg, hair

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2057
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    align-items: center;
    background-color: #6E5F68;
    color: #55464f;
    display: flex;
    height: 100vh;
    justify-content: center;
    margin: 0;
    padding: 0;
}
svg {
    width: 80vw;
}
.left {
    animation: hairLeft 12s linear infinite;
    -webkit-animation: hairLeft 12s linear infinite;
    -moz-animation: hairLeft 12s linear infinite;
    -ms-animation: hairLeft 12s linear infinite;
    -o-animation: hairLeft 12s linear infinite;
}
.right {
    animation: hairRight 12s linear infinite;
    -webkit-animation: hairRight 12s linear infinite;
    -moz-animation: hairRight 12s linear infinite;
    -ms-animation: hairRight 12s linear infinite;
    -o-animation: hairRight 12s linear infinite;
}
.back-left {
    animation: hairLeftBack 12s linear infinite;
    -webkit-animation: hairLeftBack 12s linear infinite;
    -moz-animation: hairLeftBack 12s linear infinite;
    -ms-animation: hairLeftBack 12s linear infinite;
    -o-animation: hairLeftBack 12s linear infinite;
}
.back-right {
    animation: hairRightBack 12s linear infinite;
    -webkit-animation: hairRightBack 12s linear infinite;
    -moz-animation: hairRightBack 12s linear infinite;
    -ms-animation: hairRightBack 12s linear infinite;
    -o-animation: hairRightBack 12s linear infinite;
}
@keyframes hairLeft {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        d: path("M231.9,445.1c0.7,1.9,3.5,6.4,2.6,8.8c-1.4,3.6-1.9,2.9-2.9,6.2c-1,3.3-0.4,5.9,0.7,6.4c1.5,0.7,6,0.9,11.8-0.1c8.2-1.4,15.7,1.6,19.7,1.2c3.4-0.3,7.3,0.6,8.4-2c1.2-2.8,0.1-6.6-1.1-8.9s-5.3-6.1-6.3-8.2c-2-4.2-1.3-5.2-2.4-17.8c0-0.3-0.9-5.9-1.7-7c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,230.8,442,231.9,445.1z");
        fill: url(#purple);
    }
    42% {
        fill: url(#blue-1);
    }
    47% {
        fill: url(#purple);
    }
    52% {
        d: path("M231.9,445.1c0.7,1.9,3.5,6.4,2.6,8.8c-1.4,3.6-1.9,2.9-2.9,6.2c-1,3.3-0.4,5.9,0.7,6.4c1.5,0.7,6,0.9,11.8-0.1c8.2-1.4,15.7,1.6,19.7,1.2c3.4-0.3,7.3,0.6,8.4-2c1.2-2.8,0.1-6.6-1.1-8.9s-5.3-6.1-6.3-8.2c-2-4.2-1.3-5.2-2.4-17.8c0-0.3-0.9-5.9-1.7-7c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,230.8,442,231.9,445.1z");
        fill: url(#blonde);
    }
    71% {
        d: path("M231.9,445.1c0.7,1.9,3.5,6.4,2.6,8.8c-1.4,3.6-1.9,2.9-2.9,6.2c-1,3.3-0.4,5.9,0.7,6.4c1.5,0.7,6,0.9,11.8-0.1c8.2-1.4,15.7,1.6,19.7,1.2c3.4-0.3,7.3,0.6,8.4-2c1.2-2.8,0.1-6.6-1.1-8.9s-5.3-6.1-6.3-8.2c-2-4.2-1.3-5.2-2.4-17.8c0-0.3-0.9-5.9-1.7-7c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,230.8,442,231.9,445.1z");
        fill: url(#turquose);
    }
    74% {
        fill: url(#blue-2);
    }
    76% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#blue-2);
    }
    84% {
        fill: url(#purple);
    }
    88% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#pink);
    }
    97% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#purple);
    }
    100% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#purple);
    }
}
@-webkit-keyframes hairLeft {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        d: path("M231.9,445.1c0.7,1.9,3.5,6.4,2.6,8.8c-1.4,3.6-1.9,2.9-2.9,6.2c-1,3.3-0.4,5.9,0.7,6.4c1.5,0.7,6,0.9,11.8-0.1c8.2-1.4,15.7,1.6,19.7,1.2c3.4-0.3,7.3,0.6,8.4-2c1.2-2.8,0.1-6.6-1.1-8.9s-5.3-6.1-6.3-8.2c-2-4.2-1.3-5.2-2.4-17.8c0-0.3-0.9-5.9-1.7-7c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,230.8,442,231.9,445.1z");
        fill: url(#purple);
    }
    42% {
        fill: url(#blue-1);
    }
    47% {
        fill: url(#purple);
    }
    52% {
        d: path("M231.9,445.1c0.7,1.9,3.5,6.4,2.6,8.8c-1.4,3.6-1.9,2.9-2.9,6.2c-1,3.3-0.4,5.9,0.7,6.4c1.5,0.7,6,0.9,11.8-0.1c8.2-1.4,15.7,1.6,19.7,1.2c3.4-0.3,7.3,0.6,8.4-2c1.2-2.8,0.1-6.6-1.1-8.9s-5.3-6.1-6.3-8.2c-2-4.2-1.3-5.2-2.4-17.8c0-0.3-0.9-5.9-1.7-7c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,230.8,442,231.9,445.1z");
        fill: url(#blonde);
    }
    71% {
        d: path("M231.9,445.1c0.7,1.9,3.5,6.4,2.6,8.8c-1.4,3.6-1.9,2.9-2.9,6.2c-1,3.3-0.4,5.9,0.7,6.4c1.5,0.7,6,0.9,11.8-0.1c8.2-1.4,15.7,1.6,19.7,1.2c3.4-0.3,7.3,0.6,8.4-2c1.2-2.8,0.1-6.6-1.1-8.9s-5.3-6.1-6.3-8.2c-2-4.2-1.3-5.2-2.4-17.8c0-0.3-0.9-5.9-1.7-7c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,230.8,442,231.9,445.1z");
        fill: url(#turquose);
    }
    74% {
        fill: url(#blue-2);
    }
    76% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#blue-2);
    }
    84% {
        fill: url(#purple);
    }
    88% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#pink);
    }
    97% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#purple);
    }
    100% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#purple);
    }
}
@-moz-keyframes hairLeft {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        d: path("M231.9,445.1c0.7,1.9,3.5,6.4,2.6,8.8c-1.4,3.6-1.9,2.9-2.9,6.2c-1,3.3-0.4,5.9,0.7,6.4c1.5,0.7,6,0.9,11.8-0.1c8.2-1.4,15.7,1.6,19.7,1.2c3.4-0.3,7.3,0.6,8.4-2c1.2-2.8,0.1-6.6-1.1-8.9s-5.3-6.1-6.3-8.2c-2-4.2-1.3-5.2-2.4-17.8c0-0.3-0.9-5.9-1.7-7c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,230.8,442,231.9,445.1z");
        fill: url(#purple);
    }
    42% {
        fill: url(#blue-1);
    }
    47% {
        fill: url(#purple);
    }
    52% {
        d: path("M231.9,445.1c0.7,1.9,3.5,6.4,2.6,8.8c-1.4,3.6-1.9,2.9-2.9,6.2c-1,3.3-0.4,5.9,0.7,6.4c1.5,0.7,6,0.9,11.8-0.1c8.2-1.4,15.7,1.6,19.7,1.2c3.4-0.3,7.3,0.6,8.4-2c1.2-2.8,0.1-6.6-1.1-8.9s-5.3-6.1-6.3-8.2c-2-4.2-1.3-5.2-2.4-17.8c0-0.3-0.9-5.9-1.7-7c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,230.8,442,231.9,445.1z");
        fill: url(#blonde);
    }
    71% {
        d: path("M231.9,445.1c0.7,1.9,3.5,6.4,2.6,8.8c-1.4,3.6-1.9,2.9-2.9,6.2c-1,3.3-0.4,5.9,0.7,6.4c1.5,0.7,6,0.9,11.8-0.1c8.2-1.4,15.7,1.6,19.7,1.2c3.4-0.3,7.3,0.6,8.4-2c1.2-2.8,0.1-6.6-1.1-8.9s-5.3-6.1-6.3-8.2c-2-4.2-1.3-5.2-2.4-17.8c0-0.3-0.9-5.9-1.7-7c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,230.8,442,231.9,445.1z");
        fill: url(#turquose);
    }
    74% {
        fill: url(#blue-2);
    }
    76% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#blue-2);
    }
    84% {
        fill: url(#purple);
    }
    88% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#pink);
    }
    97% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#purple);
    }
    100% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#purple);
    }
}
@-ms-keyframes hairLeft {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        d: path("M231.9,445.1c0.7,1.9,3.5,6.4,2.6,8.8c-1.4,3.6-1.9,2.9-2.9,6.2c-1,3.3-0.4,5.9,0.7,6.4c1.5,0.7,6,0.9,11.8-0.1c8.2-1.4,15.7,1.6,19.7,1.2c3.4-0.3,7.3,0.6,8.4-2c1.2-2.8,0.1-6.6-1.1-8.9s-5.3-6.1-6.3-8.2c-2-4.2-1.3-5.2-2.4-17.8c0-0.3-0.9-5.9-1.7-7c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,230.8,442,231.9,445.1z");
        fill: url(#purple);
    }
    42% {
        fill: url(#blue-1);
    }
    47% {
        fill: url(#purple);
    }
    52% {
        d: path("M231.9,445.1c0.7,1.9,3.5,6.4,2.6,8.8c-1.4,3.6-1.9,2.9-2.9,6.2c-1,3.3-0.4,5.9,0.7,6.4c1.5,0.7,6,0.9,11.8-0.1c8.2-1.4,15.7,1.6,19.7,1.2c3.4-0.3,7.3,0.6,8.4-2c1.2-2.8,0.1-6.6-1.1-8.9s-5.3-6.1-6.3-8.2c-2-4.2-1.3-5.2-2.4-17.8c0-0.3-0.9-5.9-1.7-7c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,230.8,442,231.9,445.1z");
        fill: url(#blonde);
    }
    71% {
        d: path("M231.9,445.1c0.7,1.9,3.5,6.4,2.6,8.8c-1.4,3.6-1.9,2.9-2.9,6.2c-1,3.3-0.4,5.9,0.7,6.4c1.5,0.7,6,0.9,11.8-0.1c8.2-1.4,15.7,1.6,19.7,1.2c3.4-0.3,7.3,0.6,8.4-2c1.2-2.8,0.1-6.6-1.1-8.9s-5.3-6.1-6.3-8.2c-2-4.2-1.3-5.2-2.4-17.8c0-0.3-0.9-5.9-1.7-7c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,230.8,442,231.9,445.1z");
        fill: url(#turquose);
    }
    74% {
        fill: url(#blue-2);
    }
    76% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#blue-2);
    }
    84% {
        fill: url(#purple);
    }
    88% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#pink);
    }
    97% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#purple);
    }
    100% {
        d: path("M230.7,440.8c0.7,1.9,6.5,7.3,7.1,9.7c1,4.1,2.3,7.5,7.4,10.4c6.4,3.7,13.4,4.8,15.5,3.3c2.3-1.7,5.2-19.9,5.3-22.6c0.2-4.7-4.4-16.8-5.2-18c-3.6-5.5-27.9-2.8-28.6-0.5C228.5,435,229.6,437.7,230.7,440.8z");
        fill: url(#purple);
    }
}
@keyframes hairRight {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        fill: url(#purple);
    }
    42% {
        fill: url(#pink);
    }
    47% {
        fill: url(#purple-2);
    }
    52% {
        fill: url(#blonde);
    }
    71% {
        fill: url(#turquose);
    }
    74% {
        d: path("M323.5,452c-0.5,2.5,1,5.1-0.1,8.4c-1,3.3,1.1,5.3,2.3,5.9c0.9,0.4,6.2,1.4,8.6,2c9,2.1,13.5,2.8,17.6,2.5c3.4-0.3,4.8-1.8,7-3.7c2.4-2,0.9-5.9-0.2-8.1c-1.2-2.5,5.2-9,4.8-13.1c-0.3-3.2-3.2-9.6-3.7-14.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-6,12.7-7.4,15.8C324.2,447,323.9,450,323.5,452z");
        fill: url(#blue-2);
    }
    76% {
        d: path("M359.9,430.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-0.1,15.9-1.5,19c-2.2,5-5.8,17.3-2.6,18.5c10,3.7,18.3-1.1,20.6-3.5c3.8-3.9,6.9-9.3,8.3-13.3");
        fill: url(#blue-2);
    }
    84% {
        fill: url(#purple);
    }
    88% {
        d: path("M359.9,430.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-0.1,15.9-1.5,19c-2.2,5-5.8,17.3-2.6,18.5c10,3.7,18.3-1.1,20.6-3.5c3.8-3.9,6.9-9.3,8.3-13.3");
        fill: url(#brown);
    }
    100% {
        d: path("M359.9,430.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-0.1,15.9-1.5,19c-2.2,5-5.8,17.3-2.6,18.5c10,3.7,18.3-1.1,20.6-3.5c3.8-3.9,6.9-9.3,8.3-13.3");
        fill: url(#brown);
    }
}
@-webkit-keyframes hairRight {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        fill: url(#purple);
    }
    42% {
        fill: url(#pink);
    }
    47% {
        fill: url(#purple-2);
    }
    52% {
        fill: url(#blonde);
    }
    71% {
        fill: url(#turquose);
    }
    74% {
        d: path("M323.5,452c-0.5,2.5,1,5.1-0.1,8.4c-1,3.3,1.1,5.3,2.3,5.9c0.9,0.4,6.2,1.4,8.6,2c9,2.1,13.5,2.8,17.6,2.5c3.4-0.3,4.8-1.8,7-3.7c2.4-2,0.9-5.9-0.2-8.1c-1.2-2.5,5.2-9,4.8-13.1c-0.3-3.2-3.2-9.6-3.7-14.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-6,12.7-7.4,15.8C324.2,447,323.9,450,323.5,452z");
        fill: url(#blue-2);
    }
    76% {
        d: path("M359.9,430.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-0.1,15.9-1.5,19c-2.2,5-5.8,17.3-2.6,18.5c10,3.7,18.3-1.1,20.6-3.5c3.8-3.9,6.9-9.3,8.3-13.3");
        fill: url(#blue-2);
    }
    84% {
        fill: url(#purple);
    }
    88% {
        d: path("M359.9,430.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-0.1,15.9-1.5,19c-2.2,5-5.8,17.3-2.6,18.5c10,3.7,18.3-1.1,20.6-3.5c3.8-3.9,6.9-9.3,8.3-13.3");
        fill: url(#brown);
    }
    100% {
        d: path("M359.9,430.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-0.1,15.9-1.5,19c-2.2,5-5.8,17.3-2.6,18.5c10,3.7,18.3-1.1,20.6-3.5c3.8-3.9,6.9-9.3,8.3-13.3");
        fill: url(#brown);
    }
}
@-moz-keyframes hairRight {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        fill: url(#purple);
    }
    42% {
        fill: url(#pink);
    }
    47% {
        fill: url(#purple-2);
    }
    52% {
        fill: url(#blonde);
    }
    71% {
        fill: url(#turquose);
    }
    74% {
        d: path("M323.5,452c-0.5,2.5,1,5.1-0.1,8.4c-1,3.3,1.1,5.3,2.3,5.9c0.9,0.4,6.2,1.4,8.6,2c9,2.1,13.5,2.8,17.6,2.5c3.4-0.3,4.8-1.8,7-3.7c2.4-2,0.9-5.9-0.2-8.1c-1.2-2.5,5.2-9,4.8-13.1c-0.3-3.2-3.2-9.6-3.7-14.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-6,12.7-7.4,15.8C324.2,447,323.9,450,323.5,452z");
        fill: url(#blue-2);
    }
    76% {
        d: path("M359.9,430.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-0.1,15.9-1.5,19c-2.2,5-5.8,17.3-2.6,18.5c10,3.7,18.3-1.1,20.6-3.5c3.8-3.9,6.9-9.3,8.3-13.3");
        fill: url(#blue-2);
    }
    84% {
        fill: url(#purple);
    }
    88% {
        d: path("M359.9,430.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-0.1,15.9-1.5,19c-2.2,5-5.8,17.3-2.6,18.5c10,3.7,18.3-1.1,20.6-3.5c3.8-3.9,6.9-9.3,8.3-13.3");
        fill: url(#brown);
    }
    100% {
        d: path("M359.9,430.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-0.1,15.9-1.5,19c-2.2,5-5.8,17.3-2.6,18.5c10,3.7,18.3-1.1,20.6-3.5c3.8-3.9,6.9-9.3,8.3-13.3");
        fill: url(#brown);
    }
}
@-ms-keyframes hairRight {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        fill: url(#purple);
    }
    42% {
        fill: url(#pink);
    }
    47% {
        fill: url(#purple-2);
    }
    52% {
        fill: url(#blonde);
    }
    71% {
        fill: url(#turquose);
    }
    74% {
        d: path("M323.5,452c-0.5,2.5,1,5.1-0.1,8.4c-1,3.3,1.1,5.3,2.3,5.9c0.9,0.4,6.2,1.4,8.6,2c9,2.1,13.5,2.8,17.6,2.5c3.4-0.3,4.8-1.8,7-3.7c2.4-2,0.9-5.9-0.2-8.1c-1.2-2.5,5.2-9,4.8-13.1c-0.3-3.2-3.2-9.6-3.7-14.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-6,12.7-7.4,15.8C324.2,447,323.9,450,323.5,452z");
        fill: url(#blue-2);
    }
    76% {
        d: path("M359.9,430.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-0.1,15.9-1.5,19c-2.2,5-5.8,17.3-2.6,18.5c10,3.7,18.3-1.1,20.6-3.5c3.8-3.9,6.9-9.3,8.3-13.3");
        fill: url(#blue-2);
    }
    84% {
        fill: url(#purple);
    }
    88% {
        d: path("M359.9,430.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-0.1,15.9-1.5,19c-2.2,5-5.8,17.3-2.6,18.5c10,3.7,18.3-1.1,20.6-3.5c3.8-3.9,6.9-9.3,8.3-13.3");
        fill: url(#brown);
    }
    100% {
        d: path("M359.9,430.9c0-0.3-0.2-2-0.1-4.2c0.3-6.6-25.3-2.8-26-0.5c-1.4,4.6-0.1,15.9-1.5,19c-2.2,5-5.8,17.3-2.6,18.5c10,3.7,18.3-1.1,20.6-3.5c3.8-3.9,6.9-9.3,8.3-13.3");
        fill: url(#brown);
    }
}
@keyframes hairLeftBack {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        fill: url(#purple);
    }
    42% {
        fill: url(#blue-1);
    }
    47% {
        fill: url(#purple);
    }
    52% {
        fill: url(#blonde);
    }
    71% {
        fill: url(#turquose);
    }
    72% {
        fill: url(#blue-2);
    }
    76% {
        fill: url();
    }
    100% {
        fill: url();
    }
}
@-webkit-keyframes hairLeftBack {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        fill: url(#purple);
    }
    42% {
        fill: url(#blue-1);
    }
    47% {
        fill: url(#purple);
    }
    52% {
        fill: url(#blonde);
    }
    71% {
        fill: url(#turquose);
    }
    72% {
        fill: url(#blue-2);
    }
    76% {
        fill: url();
    }
    100% {
        fill: url();
    }
}
@-moz-keyframes hairLeftBack {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        fill: url(#purple);
    }
    42% {
        fill: url(#blue-1);
    }
    47% {
        fill: url(#purple);
    }
    52% {
        fill: url(#blonde);
    }
    71% {
        fill: url(#turquose);
    }
    72% {
        fill: url(#blue-2);
    }
    76% {
        fill: url();
    }
    100% {
        fill: url();
    }
}
@-ms-keyframes hairLeftBack {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        fill: url(#purple);
    }
    42% {
        fill: url(#blue-1);
    }
    47% {
        fill: url(#purple);
    }
    52% {
        fill: url(#blonde);
    }
    71% {
        fill: url(#turquose);
    }
    72% {
        fill: url(#blue-2);
    }
    76% {
        fill: url();
    }
    100% {
        fill: url();
    }
}
@keyframes hairRightBack {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        fill: url(#purple);
    }
    42% {
        fill: url(#pink);
    }
    47% {
        fill: url(#purple-2);
    }
    52% {
        fill: url(#blonde);
    }
    71% {
        fill: url(#turquose);
    }
    72% {
        fill: url(#blue-2);
    }
    76% {
        fill: url();
    }
    100% {
        fill: url();
    }
}
@-webkit-keyframes hairRightBack {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        fill: url(#purple);
    }
    42% {
        fill: url(#pink);
    }
    47% {
        fill: url(#purple-2);
    }
    52% {
        fill: url(#blonde);
    }
    71% {
        fill: url(#turquose);
    }
    72% {
        fill: url(#blue-2);
    }
    76% {
        fill: url();
    }
    100% {
        fill: url();
    }
}
@-moz-keyframes hairRightBack {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        fill: url(#purple);
    }
    42% {
        fill: url(#pink);
    }
    47% {
        fill: url(#purple-2);
    }
    52% {
        fill: url(#blonde);
    }
    71% {
        fill: url(#turquose);
    }
    72% {
        fill: url(#blue-2);
    }
    76% {
        fill: url();
    }
    100% {
        fill: url();
    }
}
@-ms-keyframes hairRightBack {
    7.3% {
        fill: url(#brown);
    }
    18% {
        fill: url(#pink);
    }
    24% {
        fill: url(#pink-2);
    }
    34% {
        fill: url(#green);
    }
    39% {
        fill: url(#purple);
    }
    42% {
        fill: url(#pink);
    }
    47% {
        fill: url(#purple-2);
    }
    52% {
        fill: url(#blonde);
    }
    71% {
        fill: url(#turquose);
    }
    72% {
        fill: url(#blue-2);
    }
    76% {
        fill: url();
    }
    100% {
        fill: url();
    }
}

HTML

Hair Color Change SVG + Scss Animation

svg, hair

编辑器支持Emmet

快捷键

Hair Color Change SVG + Scss Animation

svg, hair

SVG+CSS3纸飞机邮件发送动画

使用D3.js（Canvas）和SVG滤镜实现的彩色粘稠染料点滴滑落动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：