源码:http://www.bootstrapmb.com/item/6001
html代码
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen Challenge: Seasons Come and Go</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
/*
* 提示:该行代码过长,系统自动注释不进行高亮。一键复制会移除系统注释
* <svg viewBox="0 0 317.51 436.32"><path class="cls" d="M193.88 294.2l20.89 7.25 18.32-10.87 37.03-4.48 22.76-11.93 24.63-23.23-9.79-41.47 7.45-17.93-4.36-18.09 2.57-10.45 2.18-22.68-10.83-12.01-4.68-15.98-11.06-13.39 2.33-13.5-15.98-26.27-13.21-7.54-.12-13.04-29.86-18.24-7.09-6.55-21.6-.7-9.12-7.33-20.13.54-14.87-6.31-57.92 12.16-5.46 11.46-18.08 2.42-2.89 11.61-26.66 16.76-2.94 20.93-10.23 6.59-3.95 15.96-18.82 19.04 2.64 26.45-9.49 14.01 3.74 10.37-9.28 52.78 26.43 25.49 12 25.49h14.42l21.05 16.45 14.15-6.22.1.03 19.51 14.84 17.15-8.11 12.16 5.38 12.94-1.01-.08 70.31-1.4 28.15-8.81 34.06-73.98 6.24 71.17 1.25 133.93 3.43-87.7-11.93-8.11-30.09-5.91-69.25 2.01-31.94 11.7-3.97 11.15 5.06z"/><path class="cls" d="M82.32 124.89l-4.6 36.17-53.09 5.22 57.69-41.39z"/><path class="cls" d="M56.36 177.27l21.36-16.21-68.44 6.7 47.08 9.51z"/><path class="cls" d="M82.32 124.89l-69.93-7.96 12.24 49.35 57.69-41.39z"/><path class="cls" d="M17.38 166.98l-4.99-50.05 12.24 49.35-7.25.7z"/><path class="cls" d="M17.38 166.98l-2.34-23.62-9.5 14.03 11.84 9.59z"/><path class="cls" d="M17.38 166.98l-8.1.78-3.74-10.37 11.84 9.59z"/><path class="cls" d="M82.32 124.89l-69.93-7.96 60.26-19.72 9.67 27.68z"/><path class="cls" d="M55.43 88.95l-43.04 27.98 60.26-19.72-17.22-8.26z"/><path class="cls" d="M55.43 88.95l-43.04 27.98 31.65-32.04 11.39 4.06z"/><path class="cls" d="M55.43 88.95l-7.1-34.54-4.29 30.48 11.39 4.06z"/><path class="cls" d="M35.16 81.93l10.29-6.62-1.41 9.58-8.88-2.96z"/><path class="cls" d="M35.16 81.93l-3.98 16.06 12.86-13.1-8.88-2.96z"/><path class="cls" d="M55.43 88.95l-7.1-34.54 38.36-10.99-31.26 45.53z"/><path class="cls" d="M74.99 37.65l-26.66 16.76 38.36-10.99-11.7-5.77z"/><path class="cls" d="M74.99 37.65l2.89-11.61 8.81 17.38-11.7-5.77z"/><path class="cls" d="M55.43 88.95l60.49-29.78-29.23-15.75-31.26 45.53z"/><path class="cls" d="M110.93 26.04l4.99 33.13-29.23-15.75 24.24-17.38z"/><path class="cls" d="M110.93 26.04l-9.51-13.88-14.73 31.26 24.24-17.38z"/><path class="cls" d="M110.93 26.04l-9.51-13.88 57.92-12.16-48.41 26.04z"/><path class="cls" d="M55.43 88.95l60.49-29.78-43.27 38.04-17.22-8.26z"/><path class="cls" d="M88.79 109.37l27.13-50.2-43.27 38.04 16.14 12.16z"/><path class="cls" d="M88.79 109.37l-6.47 15.52-9.67-27.68 16.14 12.16z"/><path class="cls" d="M88.79 109.37l-6.47 15.52 55.58 2.72-49.11-18.24z"/><path class="cls" d="M88.79 109.37l31.03-38.04 18.08 56.28-49.11-18.24z"/><path class="cls" d="M88.79 109.37l31.03-38.04-3.9-12.16-27.13 50.2z"/><path class="cls" d="M171.42 62.44l-51.6 8.89-3.9-12.16 55.5 3.27z"/><path class="cls" d="M171.42 62.44l-51.6 8.89 18.08 56.28 33.52-65.17z"/><path class="cls" d="M171.42 62.44l28.92 12.87-62.44 52.3 33.52-65.17z"/><path class="cls" d="M175.71 129.64l24.63-54.33-62.44 52.3 37.81 2.03z"/><path class="cls" d="M175.71 129.64l24.63-54.33 20.97 35-45.6 19.33z"/><path class="cls" d="M175.71 129.64l17 26.35 28.6-45.68-45.6 19.33z"/><path class="cls" d="M175.71 129.64l17 26.35-18.32 1.79 1.32-28.14z"/><path class="cls" d="M175.71 129.64l-37.81-2.03 36.49 30.17 1.32-28.14z"/><path class="cls" d="M134.55 153.81l3.35-26.2 36.49 30.17 12.55 19.49-52.39-23.46z"/><path class="cls" d="M210.17 186.7l-17.46-30.71-18.32 1.79 35.78 28.92z"/><path class="cls" d="M210.17 186.7l-23.23-9.43-12.55-19.49 35.78 28.92z"/><path class="cls" d="M210.17 186.7l-17.46-30.71 44.9 21.36-27.44 9.35z"/><path class="cls" d="M114.98 143.59l-32.66-18.7 55.58 2.72-22.92 15.98z"/><path class="cls" d="M114.98 143.59l19.57 10.22 3.35-26.2-22.92 15.98z"/><path class="cls" d="M114.98 143.59l19.57 10.22 8.19 79.28-27.76-89.5z"/><path class="cls" d="M186.94 177.27l-52.39-23.46 8.19 79.28 44.2-55.82z"/><path class="cls" d="M186.94 177.27l23.23 9.43-67.43 46.39 44.2-55.82z"/><path class="cls" d="M207.36 227.47l2.81-40.77-67.43 46.39 64.62-5.62z"/><path class="cls" d="M207.36 227.47l2.81-40.77 12.55 19.49-15.36 21.28z"/><path class="cls" d="M237.61 177.35l-27.44 9.35 12.55 19.49 14.89-28.84z"/><path class="cls" d="M85.91 155.37l-3.59-30.48-4.6 36.17 8.19-5.69z"/><path class="cls" d="M114.98 143.59l-32.66-18.7 3.59 30.48 29.07-11.78z"/><path class="cls" d="M85.91 155.37l1.32 54.33-9.51-48.64 8.19-5.69z"/><path class="cls" d="M85.91 155.37l1.32 54.33 27.75-66.11-29.07 11.78z"/><path class="cls" d="M142.74 233.09l-55.51-23.39 27.75-66.11 27.76 89.5z"/><path class="cls" d="M142.74 233.09l-55.51-23.39-19.72 24.48 75.23-1.09z"/><path class="cls" d="M77.72 161.06l9.51 48.64-19.72 24.48 10.21-73.12z"/><path class="cls" d="M77.72 161.06l-21.36 16.21 11.15 56.91 10.21-73.12z"/><path class="cls" d="M14.19 207.99l42.17-30.72 11.15 56.91-53.32-26.19z"/><path class="cls" d="M14.19 207.99l42.17-30.72-47.08-9.51 4.91 40.23z"/><path class="cls" d="M14.19 207.99l-14.19 12.55 9.28-52.78 4.91 40.23z"/><path class="cls" d="M14.19 207.99l-14.19 12.55 67.51 13.64-53.32-26.19z"/><path class="cls" d="M43.27 241.74l-43.27-21.2 67.51 13.64-24.24 7.56z"/><path class="cls" d="M43.27 241.74l-43.27-21.2 52.85 50.98-9.58-29.78z"/><path class="cls" d="M43.27 241.74l24.24-7.56-14.66 37.34-9.58-29.78z"/><path class="cls" d="M85.36 269.73l-17.85-35.55-14.66 37.34 32.51-1.79z"/><path class="cls" d="M85.36 269.73l-17.85-35.55 41.24 16.29-23.39 19.26z"/><path class="cls" d="M142.74 233.09l-75.23 1.09 41.24 16.29 33.99-17.38z"/><path class="cls" d="M142.74 233.09l-17.93 55.42 20.26-21.67-2.33-33.75z"/><path class="cls" d="M108.75 250.47l25.72 8.26 8.27-25.64-33.99 17.38z"/><path class="cls" d="M108.75 250.47l25.72 8.26-29.31 27.99 3.59-36.25z"/><path class="cls" d="M124.81 288.51l9.66-29.78-29.31 27.99 19.65 1.79z"/><path class="cls" d="M108.75 250.47l-23.39 19.26 19.8 16.99 3.59-36.25z"/><path class="cls" d="M52.85 271.52l32.51-1.79 19.8 16.99-52.31-15.2z"/><path class="cls" d="M52.85 271.52l21.05 16.45 14.19-6.24-35.24-10.21z"/><path class="cls" d="M105.16 286.72l2.5 9.9-19.57-14.89 17.07 4.99z"/><path class="cls" d="M105.16 286.72l2.5 9.9 17.15-8.11-19.65-1.79z"/><path class="cls" d="M52.85 271.52h-14.42l2.5-11.46 11.92 11.46z"/><path class="cls" d="M26.43 246.03l12 25.49 2.5-11.46-14.5-14.03z"/><path class="cls" d="M141.18 284.85l-16.37 3.66 20.26-21.67-3.89 18.01z"/><path class="cls" d="M141.18 284.85l-16.37 3.66 12.16 5.38 4.21-9.04z"/><path class="cls" d="M141.18 284.85l8.73 8.03-12.94 1.01 4.21-9.04zM141.18 284.85l8.73 8.03-12.94 1.01 4.21-9.04zM141.18 284.85l8.73 8.03-12.94 1.01 4.21-9.04z"/><path class="cls" d="M142.74 233.09l23.3 41.16-20.97-7.41-2.33-33.75z"/><path class="cls" d="M142.74 233.09l28.84 50.9 22.3 10.21-51.14-61.11z"/><path class="cls" d="M142.74 233.09l70.39 8.49-19.25 52.62-51.14-61.11z"/><path class="cls" d="M142.74 233.09l70.39 8.49-5.77-14.11-64.62 5.62z"/><path class="cls" d="M223.58 277.52l-10.45-35.94-11.93 32.59 22.38 3.35z"/><path class="cls" d="M223.58 277.52l-12.01 15.67-10.37-19.02 22.38 3.35z"/><path class="cls" d="M223.58 277.52l-12.01 15.67 58.55-7.09-46.54-8.58z"/><path class="cls" d="M223.58 277.52l69.3-3.35-22.76 11.93-46.54-8.58z"/><path class="cls" d="M223.58 277.52l69.3-3.35 24.63-23.23-93.93 26.58z"/><path class="cls" d="M223.58 277.52l73.98-40.61 19.95 14.03-93.93 26.58z"/><path class="cls" d="M223.58 277.52l73.98-40.61-46.15-33.21-27.83 73.82z"/><path class="cls" d="M223.58 277.52l13.95-81.31 13.88 7.49-27.83 73.82z"/><path class="cls" d="M223.58 277.52l13.95-81.31-14.81 9.98.86 71.33z"/><path class="cls" d="M223.58 277.52l-16.22-50.05 15.36-21.28.86 71.33z"/><path class="cls" d="M237.61 177.35l-.08 18.86-14.81 9.98 14.89-28.84z"/><path class="cls" d="M292.49 188.73l-54.96 7.48 13.88 7.49 41.08-14.97z"/><path class="cls" d="M292.49 188.73l5.07 48.18-46.15-33.21 41.08-14.97z"/><path class="cls" d="M292.49 188.73l5.07 48.18 19.95 14.03-25.02-62.21z"/><path class="cls" d="M292.49 188.73l12.39 8.73 12.63 53.48-25.02-62.21z"/><path class="cls" d="M292.49 188.73l12.39 8.73 8.5-34.46-20.89 25.73z"/><path class="cls" d="M292.49 188.73l-54.96 7.48 75.85-33.21-20.89 25.73z"/><path class="cls" d="M237.61 177.35l-.08 18.86 75.85-33.21-75.77 14.35z"/><path class="cls" d="M237.61 177.35l27.28-65.25 48.49 50.9-75.77 14.35z"/><path class="cls" d="M237.61 177.35l27.28-65.25-10.91-11.07-16.37 76.32z"/><path class="cls" d="M237.61 177.35l-44.9-21.36 61.27-54.96-16.37 76.32z"/><path class="cls" d="M221.31 110.31l-28.6 45.68 61.27-54.96-32.67 9.28z"/><path class="cls" d="M287.26 108.98l-22.37 3.12 48.49 50.9-26.12-54.02z"/><path class="cls" d="M287.26 108.98l28.3 31.34-2.18 22.68-26.12-54.02z"/><path class="cls" d="M287.26 108.98l-22.37 3.12-10.91-11.07 33.28 7.95z"/><path class="cls" d="M287.26 108.98l4.06-23.54-37.34 15.59 33.28 7.95z"/><path class="cls" d="M272.53 78.5l18.79 6.94-37.34 15.59 18.55-22.53z"/><path class="cls" d="M272.53 78.5l-10.29-13.8-8.26 36.33 18.55-22.53z"/><path class="cls" d="M248.68 51.69l13.56 13.01-8.26 36.33-5.3-49.34z"/><path class="cls" d="M248.68 51.69l-27.37 58.62 32.67-9.28-5.3-49.34z"/><path class="cls" d="M248.68 51.69l-27.37 58.62-20.97-35 48.34-23.62z"/><path class="cls" d="M248.68 51.69l-77.26 10.75 28.92 12.87 48.34-23.62z"/><path class="cls" d="M272.53 78.5l18.79 6.94-15.98-26.27-2.81 19.33z"/><path class="cls" d="M272.53 78.5l-10.29-13.8 13.1-5.53-2.81 19.33z"/><path class="cls" d="M248.68 51.69l13.56 13.01-.23-26.11-13.33 13.1z"/><path class="cls" d="M248.68 51.69l-16.53-31.34 29.86 18.24-13.33 13.1z"/><path class="cls" d="M248.68 51.69l-16.53-31.34-60.73 42.09 77.26-10.75z"/><path class="cls" d="M210.95 21.91l21.2-1.56-60.73 42.09 39.53-40.53z"/><path class="cls" d="M210.95 21.91l21.2-1.56-7.09-6.55-14.11 8.11z"/><path class="cls" d="M110.93 26.04l4.99 33.13 43.42-59.17-48.41 26.04z"/><path class="cls" d="M171.42 62.44l-55.5-3.27 43.42-59.17 12.08 62.44z"/><path class="cls" d="M171.42 62.44l39.53-40.53-51.61-21.91 12.08 62.44z"/><path class="cls" d="M210.95 21.91l-21.91-9.28 36.02 1.17-14.11 8.11z"/><path class="cls" d="M194.34 5.77l-5.3 6.86 14.42.47-9.12-7.33z"/><path class="cls" d="M194.34 5.77l-5.3 6.86-14.97-6.32 20.27-.54z"/><path class="cls" d="M95.96 23.62l-18.08 2.42 8.81 17.38 9.27-19.8z"/><path class="cls" d="M262.09 51.61l.15 13.09 13.1-5.53-13.25-7.56z"/><path class="cls" d="M287.26 108.98l1.72-10.05 11.07 13.4-12.79-3.35z"/><path class="cls" d="M287.26 108.98l17.47 19.33-4.68-15.98-12.79-3.35z"/><path class="cls" d="M315.17 191.54l-10.29 5.92 5.93-24.01 4.36 18.09z"/><path class="cls" d="M315.17 191.54l-10.29 5.92 2.81 12.08 7.48-18z"/><path class="cls" d="M193.88 294.2l14.81-6.31-7.49-13.72-7.32 20.03z"/><path class="cls" d="M193.88 294.2l14.81-6.31 2.88 5.3 3.2 8.26-20.89-7.25z"/><path class="cls" d="M233.16 290.54l-21.59 2.65 3.2 8.26 18.39-10.91z"/><path class="cls-136" d="M149.91 292.88l-.08 70.31 7.25-49.19-4.83-44.59-2.34 23.47z"/><path class="cls" d="M141.18 284.85l3.89-18.01 6.24 12.08-10.13 5.93z"/><path class="cls-138" d="M152.25 269.41l-7.18-2.57 6.24 12.08.94-9.51z"/><path class="cls-139" d="M152.25 269.41l7.25 2.5.54 70-7.79-72.5z"/><path class="cls-140" d="M167.53 276.9l-1.49-2.65-6.54-2.34.54 70 2.81 30.48 4.68-95.49z"/><path class="cls-141" d="M167.53 276.9l4.05 7.09-2.81 44.98-5.92 43.42 4.68-95.49z"/><path class="cls" d="M136.81 432.89l-71.17-1.25 73.98-6.24-2.81 7.49z"/><path class="cls" d="M136.81 432.89l133.93 3.43-131.12-10.92-2.81 7.49z"/><path class="cls" d="M183.04 424.39l87.7 11.93-131.12-10.92 43.42-1.01z"/><path class="cls-145" d="M183.04 424.39l-8.11-30.09.94 30.25 7.17-.16z"/><path class="cls-146" d="M168.77 424.7l-5.92-52.31 13.02 52.16-7.1.15z"/><path class="cls-147" d="M168.77 424.7l-5.92-52.31-3.82 52.55 9.74-.24z"/><path class="cls-148" d="M150.53 425.09l4.29-24.95 4.21 24.8-8.5.15z"/><path class="cls-149" d="M150.53 425.09l4.29-24.95-1.56-27.28-8.34 52.39 5.61-.16z"/><path class="cls-150" d="M139.62 425.4l13.64-52.54-8.34 52.39-5.3.15z"/><path class="cls-151" d="M160.04 341.91l-6.78 30.95 1.56 27.28 4.21 24.8 1.01-83.03z"/><path class="cls-152" d="M160.04 341.91l2.81 30.48-3.82 52.55 1.01-83.03z"/><path class="cls-153" d="M157.08 314l-7.25 49.19-1.4 28.15 4.83-18.48 6.78-30.95-2.96-27.91z"/><path class="cls-154" d="M162.85 372.39l6.16-47.47 5.92 69.38.94 30.25-13.02-52.16z"/><path class="cls-136" d="M168.85 376.6l.16-51.68 5.92 69.38.94 30.25-7.02-47.95z"/><path class="cls" d="M182.73 289.14l-11.7 3.97.55-9.12 11.15 5.15z"/><path class="cls" d="M149.91 292.88l1.4-13.96-10.13 5.93 8.73 8.03z"/></svg>
*/
<script src='js/TweenMax.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>
主要js代码:
// 定义循环
const seasons = item => {
let tl = new TimelineMax({ repeat: -1, yoyo: true });
tl.add("s");
tl.timeScale(1);
// 季节1
tl.staggerTo(
'.cls',
1.5,
{
cycle: {
fill: ["#3f7027", "#99b061", "#279401", "#d76a79"],
},
ease: SlowMo.ease.config( 0.7, 0.7, false)
},
0.04
)
// 季节2
.staggerTo(
'.cls',
1.5,
{
cycle: {
fill: ["#9c2706", "#f3bc2e", "#d45b12", "#5f5426"],
},
ease: SlowMo.ease.config( 0.7, 0.7, false)
},
0.04
)
// 季节3
.staggerTo(
'.cls',
1.5,
{
cycle: {
y: [500, 200, 300, 1000],
x: [200, -200, -700, 700],
rotation: function(i) {
return i * 2;
}
},
opacity: 0,
fill: "#603c14",
ease: Circ.easeInOut
},
0.05
)
return tl;
};
// 开始循环
const master = new TimelineMax();
master.timeScale(1.5);
master.add(seasons());