svg花朵着色动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-image: url(http://repo.bfw.wiki/bfwrepo/image/5e2e42d898f65.png);
  background-blend-mode: multiply;
  background-color: #e2d8d0;
  background-repeat: repeat;
  background-size: 800px;
}


svg {
  height: 80vh;
  width: 100%;
  margin-top: 10vh;
  opacity: 0.9
}

#illustration {
   animation: squigglevision 0.5s infinite alternate;
}

@keyframes squigglevision {
  0% {
    filter: url('#sketch-0');
  }
  25% {
    filter: url('#sketch-1');
  }
  50% {
    filter: url('#sketch-2');
  }
  75% {
    filter: url('#sketch-3');
  }
  100% {
    filter: url('#sketch-4');
  }
}

.path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: paint 1s ease-in-out 1s forwards;
}

.path:nth-of-type(2) {
  animation-delay: 2s;
}

@keyframes paint {
  from {
    stroke-dashoffset: 1; 
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>

</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397.332 500">
<title>Artboard 1</title>
<pattern id="watercolour" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://static.vecteezy.com/system/resources/previews/000/204/451/non_2x/vector-watercolour-texture.jpg" width="100%" height="100%" />
</pattern>
<defs>
<mask id="mask1">
<path id="mask1" d="M169.913,113.225c.545-.5.584-.5.952.082,1.246,1.431,2.4-3.082,4.068-1.545,1.2.44,2.7-.725,4.318-1.038,1.054,1.215,1.917.8,2.181-.872a143.905,143.905,0,0,1,22.468.275c1.466,2.353,3.923-.433,5.382,1.04a16.925,16.925,0,0,1,2.808,13.059c-1.674,2.39-.711,4.146-3.028,5.4,1.965,2.086-.556,2.463-1.816,3.279-2.205.336-5.629,2.373-2.841,5.387,2.281-.4,4.046-1.919,5.331.959,2.426.237,7.911,2.826,6.688,5.107,3.1-.909,2.753.71,5.329,2.428-2.5,2.208-5.736,2.61-8.235,4.892-.659.306-1.828-2.45-2.413-1.345.829,6.2,7.955,3.868,7.593,10.172.406,3.487-4.639,2.383-6.319,4.266-2,2.585-.944,6.335-4.189,7.925-.809.53-1.016-.042-1.5-.67-.669,2.622-1.883.42-2.9-.393-5.984,4.579-12.5,8.925-20.273,4.487-3.3-.833-5.911,2.285-7.789,2.351,1.129-1.989-8.222,3.713-9.93,3.567-7.308,3.006-15.243,1.955-22.491.358-3.1-.076-1.067-5.7-3.83-5.333,3.977-3.516-3.327-4.478-5.294-4.544-2.555-.861-4.185-.2-6.662-2.268.488-1.237,1.521-1.432.018-2.231-1.369,5.142-3.352-2.75-5.775.214-1.222.909-.285-2.447-1.771-.853-.088-1.636,1.244-2.246-.461-3.159,1.317-.626-.1-1.99.937-3.092.486-1.131-.789-.158-1.163-1.548-1.815,2.689.6-3.172,1.257-.256,1.321.453.012-1.129,1.163-1.272.913-.808,1.72-1.8,2.682-2.528,2.445-2.9-5.811-1.43-5.028-5.25-.627-2.654-1.378-1.633.2-4.894-1.889-6.415,4.891-4.242,6.036-12.3,1.1-2.211,2.119-1.587,3.641-.48-.087-1.926,1.7.573,2.542-.377a5.475,5.475,0,0,0,.485-4.17c.862-2.53,1.393-.821,1.342-4.184,1.535-.8,2.462-2.258,1.18-4.176,2-.7,3.136-.9,3.17-3.191a6.026,6.026,0,0,0,4.428-2.013c1.025-.567,2.6,1.24,2.88-.754,3.38-1.825,8.483-.779,12.5-.581a17.933,17.933,0,0,0,5.333-.068c1.187.218,1.332,3.08,2.924,1.942,1.521.535,5.235-3.832,3.03,0C169.933,114.953,170.392,114.251,169.913,113.225Zm35.559,59.642c.73-.157.812-1.226.559-1.781C205.605,171.249,205.739,172.087,205.472,172.867ZM214,150.6c-.269-.307-.458-.407-.618-.022C213.377,151.141,213.8,150.973,214,150.6Zm-91.5,8.062c-.063.17-.094.369.084.343C122.7,158.822,122.736,158.716,122.5,158.663Zm3.309-7.559c-.2-.192-.339-.1-.438.148C125.565,151.4,125.722,151.4,125.81,151.1Zm.47,3.3c.081.045.184.136.187-.016C126.385,154.336,126.294,154.247,126.28,154.407Zm2.57,13.031c-.081-.045-.184-.134-.189.017C128.744,167.509,128.834,167.6,128.85,167.438Zm-1.575-15.386c.071-.021.082-.052.036-.131C127.239,151.942,127.229,151.974,127.275,152.052Zm34.93-38.448c-.051-.043-.1-.026-.089.049C162.157,113.709,162.2,113.679,162.205,113.6Zm-38.442,43.537c-.006.091,0,.1.059.052Zm1.219-.773c-.045.08-.021.07.041.066Zm86.962,7.622c-.015-.088-.063-.123-.107-.054C211.834,164.022,211.89,164.041,211.944,163.99Zm-89.773-13.352c.006-.092,0-.1-.06-.052Zm-.025,12.791c-.058.056-.071.069.009.1Z" fill="#fff" />
</mask>
<mask id="mask2">
<path d="M231.058,286.284c6.023,4.626.479-1.809-2.807-3.522-1.581-1.19-5.3-2.335-5.984-3.169,1.4.323,4.246.709,5.7,2.018,5.669.6,10.955,8.717,7.635,13.731-1.2,1.414-12.7,1.146-5.217,2.153.985,3.056,3.633-.447,4.829.189-.066,1.651-4.56,1.618-2.352,2.68-.485.046.147-.046.258.226-1.265.959-2.587,1.473.1,2.719,1.35.567.774,1.812-.506,1.277,1.056,2.062.812,4.116,3.325,4.4-6.906,3.334-15.526-2.795-22.314-2.127-1.581-3.63-23.153-1.579-19.484-4.637.224-1.508-1.3-.217-2.111-.576-1-1.247,1.267-1.169,2.142-.939-5.611-2.222,1.3-3.027-5.93-5.065-2.119-1.745,2.033-6.618,3.4-3.118-.195-.756.964-2.6-.684-2.518-.553-.378-.892-1.045-.073-1.465.1-.557-.8-1.7.171-1.846,2.933-.39,2.44-2.348,5.263-1.871-.472-.775-2.927-1.271-1.875-2.773.29-1.172-2.871-1.51.22-2.036-6.666.284-11.212-6.91-4.557-5.782.428.541,1.353.181,1.915.627l-.01-.014c.729.546,1.951.343,2.818.546.074.774.483.772,1.035.5,3.558,1.81,9.3.793,11.712,4.82-.08.251-.294.229-.518.22-1.157.264.732.518-.079,1.268.147.991,1.606-.727,2.326-.142.9-.524,3.2-.315,3.731.338.206-.805,1.206.551,1.695-.416.915,2.605,1.188-1.188,1.743,1.391.209-1.048,3.109.586,4.262.176,3.307-.06,6.7,1.192,9.608,2.5.2.368.38-.032.623.237C230.69,286.8,231.563,286.809,231.058,286.284Zm-35.222-3.5c.349.454-.3-.429-.769-.256C194.342,282.8,195.507,282.824,195.836,282.784Zm-5.594-.4.1-.021C189.527,281.855,189.746,283.256,190.242,282.379Zm3.617.565c.532-.9-.458-1.524-1.149-.725Zm32.311,2.169c-.6-.61-.814-.667-1.833-.5A2.886,2.886,0,0,0,226.17,285.113ZM184.033,291.1c.372-.176.419-.517-.067-.579C183.542,290.576,183.9,290.858,184.033,291.1Zm18.93-12.125c-.23.135-.305.274-.05.4C203.286,279.44,203.225,279.112,202.963,278.979Zm19.783,5.336c.222.015.543.227.531-.057C223.04,284.185,222.911,284.02,222.746,284.315ZM185.88,271.33c.093.141.163.127.276.019C186.057,271.223,185.961,271.152,185.88,271.33Zm3.427,10.438c-.135.157-.381.2-.2.381C189.288,282.03,189.39,282.032,189.307,281.768Zm12.032-2.4c-.025.147.064.164.19.1C201.584,279.337,201.461,279.331,201.339,279.368Zm-10.572,3.518c.1.05.112,0,.114-.085C190.8,282.794,190.755,282.8,190.767,282.886Zm31.686-5.95c.027-.065.093-.165-.018-.18C222.293,276.827,222.326,276.882,222.453,276.936ZM227,285.448c-.139.046-.016.1.07.137C227.223,285.556,227.072,285.493,227,285.448Zm-21.092-6.736c.037.057.069.061.12.017C205.993,278.673,205.961,278.669,205.91,278.712ZM194.3,283.534l.07-.007C194.336,283.49,194.322,283.479,194.3,283.534Zm5.861-4.921c0,.074.044.112.107.066C200.293,278.609,200.235,278.583,200.164,278.613Zm-3.338,4.374c-.07-.025-.1-.026-.1.056C196.792,283.067,196.825,283.069,196.826,282.987Z" fill="#fff" />
<path data-name="mask2" d="M237.786,269.033a6.762,6.762,0,0,1,.3,2.094.927.927,0,0,0,.305.636,5.321,5.321,0,0,0,1.074.838,9.272,9.272,0,0,1,2.529,1.974,3.577,3.577,0,0,0,.9.536c0,.006.092.06.108.131a1.4,1.4,0,0,0,1.016,1.115c.884.3,1.114.931.849,1.895-.01.035-.055.061-.084.092s-.069.056-.107.061c-.35.049-.725-.121-1.031.256a1.254,1.254,0,0,0-.164,1.073,16.412,16.412,0,0,1-.405,4.231,1.455,1.455,0,0,1-.459.724,5.93,5.93,0,0,1-.817.587.71.71,0,0,0-.117.215c-.13.987-.214,1.062-1.132,1.061-.541,0-1.083,0-1.622.045a1.67,1.67,0,0,1-1.673-.576,3.08,3.08,0,0,0-.552-.466l.435-.529c-.417-.529-.824-1.046-1.279-1.622a2.621,2.621,0,0,1,.3-.609c.46-.543.954-1.057,1.431-1.586a3.69,3.69,0,0,0,.565-.673,5.514,5.514,0,0,1,1.923-1.934.876.876,0,0,0-.081-1.588,1.994,1.994,0,0,0-1.651-.335,6.025,6.025,0,0,1-.993.108c-.292-.424.264-.542.324-.881-.066-.065-.137-.2-.233-.22a3.838,3.838,0,0,1-1.819-.737c-.095-.081-.24-.123-.3-.221-.556-.929-1.551-.989-2.429-1.283a4.267,4.267,0,0,0-1.867,2.061c.5.364,1.024.7,1.04,1.489-.973-.1-1.446-.947-2.255-1.229a11.749,11.749,0,0,1-2.257-1.424c.557,1.2.557,1.2.524,1.783h.017a.933.933,0,0,0-1.1.134c-.295-.2-.48-.577-.912-.457.578-.661.095-1.282.043-1.96l-1.062.515c.243.406.776.6.651,1.143a.374.374,0,0,0-.083-.05.246.246,0,0,0-.077,0l.16.034.4.317-.6.525a1.332,1.332,0,0,0,.939.769c.766.145.943.676,1.02,1.4l-.77.123c0-.12,0-.241-.014-.361-.015-.187.044-.413-.22-.482a.127.127,0,0,0-.1.037.461.461,0,0,0,.026.645c.069.08.211.1.319.142l.041.809c-.483.171-.4-.251-.638-.445-.656-.021-1.4-.069-2.137-.061a3.165,3.165,0,0,1-1.175-.289c0-.258,0-.463,0-.678-.455-.459-.928-.082-1.44,0a4.886,4.886,0,0,0-2.99-1.17l-.328-1.072c-.2-.094-.429-.19-.647-.3s-.422-.237-.626-.354a2.969,2.969,0,0,0-.362.193c-.681.51-.909.5-1.477-.062a1.8,1.8,0,0,1-.669-1.277l-1.592-.956c-.114.181-.24.383-.367.584-.472-.183-.731.337-1.137.356-.114,0-.3-.037-.335-.112-.219-.486-.9-.556-1-1.145-.018-.1-.163-.18-.249-.269-.021-.07-.038-.141-.064-.208a.339.339,0,0,0-.065-.084c0,.046-.026.105-.006.135a.956.956,0,0,0,.152.153c-.158.026-.339.113-.47.065a4,4,0,0,1-.633-.379.378.378,0,0,0-.551.068.769.769,0,0,0-.145.562,6.356,6.356,0,0,0,.517.938c-.154.291-.521.322-.542.687a.5.5,0,0,1-.483.492c-.3.011-.376-.217-.479-.466a4.875,4.875,0,0,0-.569-.933c-.056-.078-.212-.084-.375-.142-.085.248-.16.468-.255.747l-.765-.629c.067-.145.234-.338.2-.488a.726.726,0,0,0-.393-.416,1.934,1.934,0,0,0-.608-.07h.02c-.473-.258-.943-.522-1.42-.772.........完整代码请登录后点击上方下载按钮下载查看