1、新建html文档。
2、书写hmtl代码。<h1 class="banner"> <span class="flag"></span> <span class="flag"></span> <span class="flag">H</span> <span class="flag">U</span> <span class="flag">Z</span> <span class="flag">Z</span> <span class="flag">A</span> <span class="flag">H</span> <span class="flag">!</span> <span class="flag"></span> <span class="string"> <svg width="800" height="230" viewBox="0 0 800 230"> <path fill="none" d="M0,0 C100,100 700,200 800,100" /> </svg> </span></h1><h1 class="banner"> <span class="flag"></span> <span class="flag"></span> <span class="flag"></span> <span class="flag"></span> <span class="flag"></span> <span class="flag"></span> <span class="flag"></span> <span class="flag"></span> <span class="flag"></span> <span class="flag"></span> <span class="string"> <svg width="800" height="230" viewBox="0 0 800 230"> <path fill="none" d="M0,0 C100,100 700,200 800,100" /> </svg> </span></h1>
3、书写css代码。<style>.banner { width: 800px; height: 100px; border: 0px dotted cyan; position: relative; transform-style: preserve-3d; transform: var(--transform); --transform: scale(1); display: none;}.banner { display: flex; justify-content: space-between;}.flag { display: flex; height: 70px; width: 45px; background: hsl(var(--hue,43), 90%, 55%); color: hsl(43, 90%, var(--text,5%)); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); transform-origin: 50% 0%; justify-content: center; align-items: center; padding-bottom: 1rem;}.string { display: none;}.flag:nth-of-type(odd) { --hue: 343; --text: 95%;}.banner:nth-of-type(even) .flag:nth-of-type(even) { --hue: 333;}.banner:nth-of-type(even) .flag:nth-of-type(odd) { --hue: 193;}.banner:nth-of-type(3) .flag:nth-of-type(odd) { --hue: 33;}.banner:nth-of-type(3) .flag:nth-of-type(even) { --hue: 173;}@supports (offset-path: path('M0,0 C100,100 700,200 800,100')) { .banner { height: 230px; } .banner:nth-of-type(even) { --transform: rotate(0deg); } .banner:nth-of-type(2) { --transform: scaleX(-1) rotate(-8deg); } .banner:nth-of-type(1) { --transform: rotate(-4deg); } .flag:not(.string) { position: absolute; offset-anchor: 50% 0%; offset-path: path('M0,0 C100,100 700,200 800,100'); } .string, .string svg { position: absolute; width: 800px; top: 0; left: 0; height: 230px; display: block; background: transparent; clip-path: none; } .string path { stroke: hsla(183, 20%, 30%, .3); stroke-width: 1px; d: path('M0,0 C100,100 700,200 800,100'); }}body { height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; overflow: hidden; perspective: 700px; background: hsl(183, 100%, 95.25%);}*, *::before, *::after { box-sizing: border-box;}</style>
4、书写并添加js代码。<script>const strands = Array.from(document.querySelectorAll('.banner'));const duration = 5450;const supportsOffsetPath = window.CSS && CSS.supports && CSS.supports('offset-path', "path('M0,0 L1,1')");const rxRandomNegative = -20;const rxRandomNegativeBase = -30;const rxRandomPositive = 40;const rxRandomPositiveBase = 30;if (document.documentElement.animate) { strands.forEach(animateStrands);}function animateStrands(strand) { let flags = Array.from(strand.querySelectorAll('.flag')); let strandPathDuration = Math.random() * (2 * duration) + duration; let fromPath = "path('M0,0 C100,100 700,200 800,100')"; let toPath = `path('M0,0 C${Math.random() * 20 + 80},${Math.random() * 20 + 80} ${Math.random() * -50 + 700},${Math.random() * 100} 800,100')`; flags.forEach((flag, i) => { flag.style.offsetDistance = `${80 + i * 740 / flags.length}px`; animateWindRotate(flag); animateWindCurve(flag, fromPath, toPath, strandPathDuration); }); if (supportsOffsetPath) { animateStringInWind(strand, fromPath, toPath, strandPathDuration); }}function animateWindRotate(flag) { flag.animate(getRandomizedFlagFrames(), { duration: duration, iterations: Infinity, direction: 'alternate', delay: 1000 * Math.random() - 1000 });}function animateWindCurve(flag, fromPath, toPath, strandPathDuration) { flag.animate([ {offsetPath: fromPath}, {offsetPath: toPath} ], { duration: strandPathDuration, iterations: Infinity, easing: 'ease-in-out', direction: 'alternate' });}function animateStringInWind(strand, fromPath, toPath, strandPathDuration) { let stringy = strand.querySelector('.string path'); if (stringy) { stringy.animate([ {d: fromPath}, {d: toPath} ], { duration: strandPathDuration, iterations: Infinity, easing: 'ease-in-out', direction: 'alternate' }); }}function getRandomizedFlagFrames() { let easing1 = `cubic-bezier(${Math.random() * .1 + .3},0,${Math.random() * .1 + .3},${Math.random() * .15 + .95})`; let easing2 = `cubic-bezier(${Math.random() * .1 + .3},0,${Math.random() * .1 + .3},${Math.random() * .15 + .95})` return [ { transform: 'rotateX(0deg)', filter: 'grayscale(5%)' }, { transform: `rotateX(${Math.random() * rxRandomNegative + rxRandomNegativeBase}deg)`, filter: 'grayscale(25%)', //shadows for when rotating away from you easing: easing1 }, { transform: `rotateX(${Math.random() * rxRandomPositive + rxRandomPositiveBase}deg)`, filter: 'grayscale(0%)', easing: easing1 }, { transform: `rotateX(${Math.random() * rxRandomNegative + rxRandomNegativeBase}deg)`, filter: 'grayscale(25%)', easing: easing2 }, { transform: `rotateX(${Math.random() * rxRandomPositive + rxRandomPositiveBase}deg)`, filter: 'grayscale(0%)', easing: easing2 } ]}</script>
5、代码整体结构。
6、查看效果。
