CSS白天和黑夜过渡和动画

下载代码

html

css

分享到微信朋友圈

html

<div class="comet-rain">
    
    <svg aria-hidden="true" id="svg-comet" class="svg-defs" data-name="comet" viewBox="0 0 195 173.05" width="195" height="173.05">
        <symbol id="comet">
            <path d="M192.39.66c-33.66,31.46-93.3,81.16-129,108.88L3.42,156c-5,3.89-4.29,11.28.74,15.4s12.84-.83,13.1-1.07C51.09,138.62,82.6,104.72,116.64,73c8.89-8.29,66.23-59.5,77.47-70.13C196.17,1,194.24-1.08,192.39.66Z" />
        </symbol>
    </svg>

<svg aria-hidden="true" width="0" height="0">
        <defs>
            <linearGradient id="gradient" x1="194.94" y1="4.2" x2="11.72" y2="161.98" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#fff" stop-opacity="0.03"></stop>
                <stop offset="100%" stop-color="var(--t-sun-color)"></stop>
            </linearGradient>
        </defs>
    </svg>

<div class="day-night-transition">
    <div class="heading">
        <p class="smallnumber"> 101.</p>
        <h1> CSS Transitions </h1>
    </div>
    <svg  id="transition-scene" class="transition-scene" viewBox="-180 -185 890 890">
        <title>CSS Transition illustrated</title>
   <desc>A day and night illustration of a desert landscape. Default it "day", orange and dark pink colors, with a sun high in the sky and cactuses. When you hover it, it turns into night dark purple colors, the sun sets and the moon rises.</desc>
        <defs>
            <clipPath id="clip-path">
                <circle id="mask" class="cls-1" cx="250" cy="250" r="250" />
            </clipPath>
        </defs>
        <g class="rings">
            <circle class="circle-bg shadow-01" cx="250" cy="250" r="270" />
            <circle class="circle-bg shadow-02" cx="250" cy="250" r="290" />
        </g>

</g>
                <g id="desert" data-name="desert" class="desert">
                    <path id="mountain" data-name="mountain" class="mountain color-fade-transition" d="M60.87,386.8l26.42-14.43a96,96,0,0,0-1.56-12c-4.2-25.54-4.39-51.56-4.57-77.44-.07-10.56-.22-31.67-.22-31.67L56,256s-1.9-31.39.42-56.17c-8.94-.46-8.76-1.63-18.27.84-2,.52-5.44,1.93-5.34,1.38,1.12-6.19-1.8-12.76-1.74-18.24.28-26.39,1.36-28.68-.32-49.52L28,135A250.23,250.23,0,0,0,42.74,389.82C50.07,389.31,58.17,388.28,60.87,386.8Z" />
                    <path id="sand-04" class="sand-04 color-fade-transition" d="M397,333.22c-40.4-.62-80-18.35-120.44-15.54-17.49,5.25-21-6.43-37.09-.34a402,402,0,0,0-84.67,33.42c11.54,1.51,23.27,5.71,35.59,12.05,32.58,14.61,65.2,29.24,96.72,46,58.71-31.32,117.11-56,187-55.58a10.33,10.33,0,0,0,4.18-1c1.18-2.75,3.54-7.79,7.71-19.39C460.84,310.19,425.73,332.07,397,333.22Z" />
                    <g id="cactus-02">
                        <path id="cactus-body" class="cactus-body color-fade-transition" d="M439,264.27c-.48-5.65-2.14-12.54-7.27-15.46-1.61-.23-2.22,2-2.31,3.63a31.63,31.63,0,0,1-10.67,21.66c-2.71-16-3.12-32.22-6.8-47.85-2-4.38-5.76-8.58-10.58-9.59a7.16,7.16,0,0,0-8.61,6.24c-7.4,31-8.55,61.82-4.26,94.57a58.84,58.84,0,0,1-23.7-36.84c-.33-1.81-.71-3.85-2.25-4.86-6.73-4.41-8.82,13.29-8.38,18.45,1.86,20.31,18.2,44.89,37.73,50.87,1,11.12,1.73,22.34,2.74,22.56,1.49.32,11.84-.91,13.33-1.21,5.28-1,13.23.2,17.75-2.71-.49-20.52-2-49.24-4.4-69C433.52,290.34,440,276.79,439,264.27Z" />
                        <path id="flower" class="cactus-flower color-fade-transition" d="M413.17,215.44c-.17-4.35-5-2.76-6.05.89,3-4.29-1.52-16.85-4.57-6.8-2.09-4.81-8.4-1.9-5.12,2.6-7.41-4.07-11.77,4-2.09,5.28-2.49.48-3.73,4-1.6,5.63,2.89,1.56,7.66.83,9-2.49-.63,6.16,10.31,3.94,7.54-.57,1.56.57,3.32-1.37,1.88-2.58A3.25,3.25,0,0,0,413.17,215.44Z" />
                    </g>
                    <g id="cactus-02">
                        <path id="cactus-body-2" data-name="cactus-body" class="cactus-body color-fade-transition" d="M259.32,307.43c-5-2.06-10.43.84-13.55,3,.73-4.65-.69-9.72-3-14.17,10.76-.41,18.7-17.91,10.26-26.3-11.26-7.07-21.93,6.61-21.15,16.4-20.38-2.39-12.52,33.92,2.81,35.47-3.52,6.24-4.88,12.82-3.32,19.05a19.37,19.37,0,0,0-8.86.08C227,329,217.15,313.88,204.87,323c-5.74-13-26-14.08-25.7,3.93,1.08,13,9.83,22.56,22.3,16.08a14.42,14.42,0,0,0,8.67,6.95c-5.62,8.53-4.2,20.08-1.42,28.94,16.62,35.1,47.7-1.4,34.44-26.92C260.19,348.82,275.41,314.07,259.32,307.43Z" />
                        <g id="flowers">
                            <path class="cactus-flower color-fade-transition" d="M187.62,302.69a8.47,8.47,0,0,0-5.26,4c-2-4.07-9.07-1.21-7.81,3.12-9.63.4-5.14,12.6,2.73,9.56,1.14-.38,4.35-1.39,4.35-1.39,2.43-3.48,7.51-4.49,9.06-7.93C193.52,306.88,192.69,301.78,187.62,302.69Z" />
                            <path class="cactus-flower color-fade-transition" d="M261.82,256.1c-2.2-4.68-8.11-3.12-11.09-.09,1.58-2.9,2.77-5.93,2.56-9.35,0-5.08-4.33-3.44-6.13-.32a19.58,19.58,0,0,0-3.41,12.53c-10-15.84-21.09,2.67-4.3,8.53a10.28,10.28,0,0,0,5.78.69c3.24-.33,3.7.57,4.71.13C254.63,265.84,264,262.92,261.82,256.1Z" />
                        </g>
                    </g>
                    <path id="sand-01" class="sand-01 color-fade-transition" d="M361,421.5c-25.73-3.65-40.79-6.53-62.84-8.88-4.87-.52-10.07-1-15.81-1.48-54.49-1.08-113.67,66-166.95,49.35a2.71,2.71,0,0,1,.67.63c32.86,23.65,86.38,39.58,135.66,39.58,73.88,0,144.87-33.19,184.34-83.7C419.71,428.57,380.41,424.25,361,421.5Z" />
                    <path id="sand-02" class="sand-02 color-fade-transition" d="M115.37,460.49c53.28,16.67,112.46-48.43,167-47.35,5.59.46,10.67.94,15.42,1.44-34.8-19.22-71.13-35.51-107.4-51.77-30.82-15.86-57.94-18.33-87.6,1.13L60.87,386.8c-2.71,1.48-10.8,2.51-18.14,3h0A251.32,251.32,0,0,0,116,461.11,3.1,3.1,0,0,0,115.37,460.49Z" />
                    <path id="succulent-body-01" class="cactus-body color-fade-transition" d="M97.15,369.74c-2.57.21-5.31-.66-7.66.86a12.17,12.17,0,0,0,1.77-9.09.4.4,0,0,0-.76-.14c-1.57,2.36-4.21,3.84-5.49,6.49.6-.9-2.45-11.68-3.45-9.32-1.12,3-4,5.57-3.43,9.14-1.9-2.44-5.09-3-7.37-4.83-.27-.29-.82.09-.64.44,1.24,2.43,1.45,5.27,2.86,7.61a48.31,48.31,0,0,1-6.13.55.41.41,0,0,0-.37.43A9.54,9.54,0,0,0,73,377.31c-1.08.81-5.62,4.05-4.88,5.33,4.44,2.79,9.75.52,12.78-3.25a7.09,7.09,0,0,0,6.29-3.48c4.06-.15,8.19-2,10.4-5.59A.41.41,0,0,0,97.15,369.74Z" />
                    <path id="sand-03" data-name="sand-03" class="sand-03 color-fade-transition" d="M280,413.14h2.33c5.74.47,10.94,1,15.81,1.48,22.05,2.35,37.11,5.23,62.84,8.88,19.44,2.75,58.71,5.07,75-6.49a250.28,250.28,0,0,0,42.29-65c-83.68.42-138.1,28.06-199.35,61.15h1Z" />
                    <path id="succulent-body-02" class="cactus-body color-fade-transition" d="M380.55,412.55c1.34-2.11,4.26-6.49,5.94-16.08a60,60,0,0,0-15.4,10c1-6.74-.89-11.6-2.95-18.29-4.74,7.44-7.53,12.69-8.75,16.65-2.82-4.05-6.95-6.51-16-11.33-.54,6.43,2.4,14.84,6.4,19.85-6.52-.17-14.28.89-19.8.61,8.17,9.36,25.55,18.16,36.68,13.16,10.52,2.52,22.66-6.57,32.23-10.15A54.13,54.13,0,0,0,380.55,412.55Z" />
                </g>
            </g>
        </g>

</svg>
    <div class="explanation">

<p> Change one (or many) properties between 2 states, from <span class="accent">A</span> to <span class="accent">B</span> on a specific CSS trigger (hover/touch the illustration). </p>
    </div>
</div>

<div class="solar-system-animation">
    <div class="heading">
        <p class="smallnumber"> 102.</p>
        <h1> CSS Animations </h1>
    </div>
    <svg id="animation-scene" class="animation-scene" viewBox="0 0 1400 1400">
        <title>CSS Animations illustrated</title>
   <desc>An little earth illustration with a little moon orbiting around it, the whole itself orbiting around a yellow pusling sun.</desc>
        <g id="Solar-system">
            <circle id="sun-path" class="astral-paths earth-path" cx="700" cy="700" r="446.73" />
            <g id="system-sun" class="system-sun">
                <g class="shadow-02-container">
                    <path id="Shadow-2" class="sun-system-shadow-02" d="M891,701.53c-.73-17.83-24.69-14.39-27-34.15-.62-14.17,22.33-20.33,13.08-40.67-7.35-16.19-28.2-3.64-37.76-21-5.88-12.84,13-27.52-3.14-42.69-12.85-12.07-27.42,7.67-42.74-4.61-10.24-9.56,1.73-30.51-18.88-38.2-16.4-6.13-22.46,17.81-41.22,12.46-13-4.82-9.83-28.86-31.75-27.91-17.44.76-14.09,25.24-33.42,27.64-13.85.64-19.88-22.82-39.78-13.36-15.84,7.52-3.57,28.83-20.54,38.6-12.56,6-26.91-13.3-41.75,3.22-11.82,13.14,7.49,28-4.52,43.69-9.36,10.47-29.85-1.76-37.38,19.31-6,16.76,17.41,23,12.18,42.13-4.72,13.33-28.24,10-27.31,32.46.73,17.83,24.69,14.39,27,34.15.62,14.17-22.33,20.33-13.08,40.67,7.35,16.19,28.19,3.64,37.75,21,5.89,12.84-13,27.51,3.14,42.69,12.86,12.07,27.43-7.68,42.76,4.61,10.22,9.56-1.73,30.51,18.87,38.2,16.4,6.13,22.46-17.81,41.22-12.46,13,4.82,9.83,28.86,31.75,27.91,17.45-.76,14.09-25.24,33.42-27.64,13.85-.64,19.88,22.82,39.78,13.36,15.84-7.52,3.57-28.82,20.53-38.6,12.57-6,26.92,13.3,41.77-3.22,11.81-13.14-7.5-28,4.52-43.69,9.35-10.47,29.84,1.75,37.37-19.31,6-16.76-17.41-23-12.18-42.13C868.4,720.66,891.91,723.94,891,701.53Z" />
                </g>
                <g class="shadow-01-container">
                    <path id="Shadow-1" class="sun-system-shadow-01" d="M853.11,701.23c-.59-14.3-19.79-11.54-21.66-27.38-.51-11.36,17.89-16.3,10.48-32.61-5.9-13-22.61-2.92-30.27-16.82-4.72-10.29,10.43-22.06-2.52-34.22-10.31-9.68-22,6.15-34.27-3.7-8.21-7.66,1.39-24.46-15.13-30.63-13.15-4.91-18,14.28-33,10-10.46-3.87-7.88-23.14-25.45-22.38-14,.61-11.3,20.23-26.8,22.16-11.11.51-15.94-18.3-31.89-10.72-12.7,6-2.86,23.12-16.47,31-10.07,4.82-21.57-10.66-33.47,2.58-9.48,10.54,6,22.47-3.63,35-7.5,8.4-23.93-1.41-30,15.48-4.8,13.44,14,18.41,9.77,33.78-3.78,10.69-22.64,8.06-21.89,26,.59,14.3,19.79,11.54,21.66,27.38.51,11.36-17.89,16.3-10.48,32.61,5.9,13,22.6,2.92,30.27,16.81,4.72,10.3-10.44,22.07,2.52,34.23,10.31,9.68,22-6.15,34.27,3.7,8.2,7.67-1.38,24.46,15.13,30.63,13.15,4.91,18-14.28,33-10,10.46,3.87,7.88,23.14,25.45,22.38,14-.61,11.3-20.23,26.8-22.16,11.11-.51,15.94,18.3,31.89,10.72,12.7-6,2.86-23.12,16.46-31,10.07-4.82,21.58,10.66,33.48-2.58,9.48-10.54-6-22.47,3.63-35,7.5-8.39,23.93,1.4,30-15.48,4.8-13.44-14-18.41-9.77-33.78C835,716.56,853.86,719.19,853.11,701.23Z" />
                </g>
                <g id="Sun-Center" class="sun-center">
                    <g id="sun-bg">
                        <ellipse class="sun-system-bg" cx="700.1" cy="700.02" rx="112.62" ry="111.31" />
                    </g>
                    <g id="solar-pattern" class="sun-system-patterns">

<path d="M645.23,691.65c-22.92-1.52-43.41,35.65-17.18,45.57,23.25,3.94,10-15.63,23.57-22C666.1,709.92,671.45,691.23,645.23,691.65Z" />
                        <path d="M677.68,619.74c-11,4.66,2.61,17.09,7.19,6.73C686.21,622.31,681.56,618.62,677.68,619.74Z" />
                        <path d="M677.33,650.71c-2.92-9.79-21.62-11.71-23.4-.51C626.38,669.21,686.18,680.3,677.33,650.71Z" />
                        <path d="M692.35,637.33c-4.34,0-4.35,6.75,0,6.75S696.71,637.33,692.35,637.33Z" />
                        <path d="M796.8,693.83c-2.73-40.32-54.15-24.47-22.92,8.42,3.83,12.2-32.82,31.45-1.68,34.78C789.86,732.64,796.87,710.12,796.8,693.83Z" />
                        <path d="M760.72,702c-3.23-6.51-12.89-1.75-10.73,4.83C752.53,714.43,764,708.8,760.72,702Z" />
                        <path d="M752.51,745.21c-4.35,0-4.35,6.76,0,6.76S756.87,745.21,752.51,745.21Z" />
                        <path d="M645.85,742.12c-4.35,0-4.36,6.75,0,6.75S650.2,742.12,645.85,742.12Z" />
                    </g>
                </g>
            </g>
            <g class="system-earth-moon-container">
                <g id="system-earth" class="system-earth-moon">
                    <circle class="astral-paths moon-path" cx="700" cy="257.25" r="163.79" />
                    <g id="earth" class="system-earth">
                        <circle id="Shadow-2-2" class="earth-shadow-02" cx="700" cy="255.79" r="95.31" />
                        <circle id="Shadow-1-2" class="earth-shadow-01" class="cls-5" cx="699.31" cy="256.48" r="76.5" />
                        <g id="Planet" class="planet">
                            <circle id="water-bg" class="earth-water" cx="699.7" cy="256.09" r="56.15" />
                            <g id="continents" class="earth-continent">
                                <path d="M687.11,207.26c2,4.53,8.75,4.4,11.32.86,1.82-3.13,1.9-8.09,6.22-8C702.06,200.07,679.4,198.12,687.11,207.26Z" />
                                <path d="M726.44,287.35c-6.77-1.25-15.74,18.37-7.09,17.24C725.52,302.43,734.86,289.49,726.44,287.35Z" />
                                <path d="M676.87,217.52c-2.48-13.89-8.65-9-8.58-.22C668.14,219.59,676.53,218.46,676.87,217.52Z" />
                                <path d="M753.7,240.67c-2.54-7.48-5.41-14.3-10.86-20.5a56.06,56.06,0,0,0-7.18-7.19c-17.83,3.73-24.3,9-45.48,4.27-2.71-4.14-8.38,2.63-9.53,4.15-.85.5-4.44,2.31-4.81,3.12-.55,2.89,5.34,6,1.82,9a7.84,7.84,0,0,1-4,1.22c-9.43-.13-11.36,5.3-11.92,10.35.48,11,12.69,1.25,16.93-1.65,6.47-2.64,5.35,3.6,8.22,3,5.12-1.24,22.63-4.65,16,5.07-13.25,9-15.93-10.69-35,1.3-11.15-1.69-23.4,8.5-15.33,18.65,5.8,9.29,19.07,4.11,27.05,8.78,4.92,9,2.51,19.76,8.19,28.33a12.37,12.37,0,0,0,3.79,3.12,57.43,57.43,0,0,0,6.74.55c6.64-1.9,12.85-10.16,15.21-16.53,3.59-9.8,2.31-14.54,10.42-22.33,0-6.05,2.53-14.53,10-16,9-.21,10.26,9,17.54,11.44a12.66,12.66,0,0,0,3.83-5.63,53.91,53.91,0,0,0,.45-7A56.51,56.51,0,0,0,753.7,240.67Z" />
                            </g>
                        </g>
                    </g>
                    <g id="system-moonlight" class="system-moonlight">
                        <circle id="Shadow-2-3" class="moon-shadow-02" cx="700" cy="92.85" r="40" />
                        <circle id="Shadow-1-3" class="moon-shadow-01" cx="700" cy="92.85" r="30.66" />
                        <g id="moon-system-center">
                            <circle id="moon-system-bg" class="moon-center" cx="700" cy="92.85" r="20.47" />
                            <g id="moon-pattern" class="moon-pattern">
                                <ellipse cx="692.39" cy="81.87" rx="2.95" ry="2.96" />
                                <ellipse cx="710.87" cy="101.69" rx="5.17" ry="5.27" transform="translate(607.73 812.35) rotate(-89.88)" />
                                <ellipse cx="700.69" cy="103.74" rx="2.24" ry="2.28" transform="translate(595.52 804.22) rotate(-89.88)" />
                                <ellipse cx="705.24" cy="94.63" rx="1.39" ry="1.47" transform="translate(609.17 799.68) rotate(-89.88)" />
                                <ellipse cx="713.68" cy="93.91" rx="0.59" ry="0.63" transform="translate(618.31 807.4) rotate(-89.88)" />
                                <ellipse cx="703.44" cy="78.86" rx="2.49" ry="2.63" transform="translate(623.15 782.14) rotate(-89.88)" />
                                <ellipse cx="686.07" cy="99.66" rx="1.21" ry="1.24" transform="matrix(0, -1, 1, 0, 585.01, 785.53)" />
                                <ellipse cx="689.2" cy="87.88" rx="1.21" ry="1.22" transform="matrix(0, -1, 1, 0, 599.91, 776.9)" />
                                <ellipse cx="694.15" cy="87.54" rx="1.61" ry="1.7" transform="matrix(0, -1, 1, 0, 605.19, 781.51)" />
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </svg>
    <div class="explanation">
    <p> Change one (or many) properties between many different states and build loops using <span class="accent">keyframes</span>.</p>
    </div>
</div>

css

:root {
  /* Fixed colors that don't get transition/animation */
  --dark-cosmos-color: hsl(290, 34%, 10%);
  --star-color: hsl(272, 57%, 95%);
  --star-color-transparency: hsla(272, 57%, 95%, 0.5);
  --t-sun-color: hsl(47, 100%, 88%);
  --t-moon-color: hsl(274, 93%, 94%);
  --t-moon-pattern-color: hsl(274, 58%, 89%);
  --sunsys-color: hsl(41, 99%, 75%);
  --sunsys-patterns-color: hsl(33, 95%, 73%);
  --earth-water-color: hsl(202, 62%, 74%);
  --earth-continent-color: hsl(192, 34%, 64%);
  /* colorz  that will change on transition */
  --circle-bg-color: hsl(28, 97%, 70%);
  --cactus-body-color: hsl(337, 43%, 28%);
  --cactus-flower-color: hsl(348, 80%, 62%);
  --mountain-color: hsl(346, 43%, 50%);
  --sand-01-color: hsl(339, 55%, 30%);
  --sand-02-color: hsl(335, 62%, 37%);
  --sand-03-color: hsl(338, 53%, 38%);
  --sand-04-color: hsl(336, 46%, 50%);
  --poster: hsl(25, 43%, 79%);
  --poster-border: min(3vmax, 50px);
  /* animation and transition timings */
  --t-slow: 2800ms;
  --t-med: 1800ms;
  --t-fast: 1200ms;
  --t-delay-motionpath: 00ms;
  --t-delay-colorfades: 200ms;
  --a-scale-from: scale(1);
  --a-scale-to: scale(1.05);
}

/* Sass vars */
/* CSS solar system animation */
.sun-system-bg,
.sun-system-shadow-01,
.sun-system-shadow-02 {
  fill: var(--sunsys-color);
}

.sun-system-shadow-01,
.sun-system-shadow-02 {
  opacity: 0.1;
}

.sun-system-patterns {
  fill: var(--sunsys-patterns-color);
}

.earth-continent {
  fill: var(--earth-continent-color);
}

.earth-water,
.earth-shadow-01,
.earth-shadow-02 {
  fill: var(--earth-water-color);
}

.earth-shadow-01,
.earth-shadow-02 {
  opacity: 0.15;
}

.astral-paths {
  fill: none;
  stroke: var(--star-color);
  stroke-miterlimit: 10;
  stroke-width: 2px;
  stroke-dasharray: 10 10;
  opacity: 0.5;
}

/* Solar System Animations */
/* moon around the earth */
.system-moonlight {
  offset-path: path("M536.21,257.25a163.79,163.79 0 1,0 327.58,0a163.79,163.79 0 1,0 -327.58,0");
  /* convert circle to path http://complexdan.com/svg-circleellipse-to-path-converter/ */
  offset-distance: 100%;
  -webkit-transform-origin: 700px 92px;
          transform-origin: 700px 92px;
}

/* Earth around the sun */
.system-earth-moon-container {
  -webkit-transform-origin: 700px 700px;
          transform-origin: 700px 700px;
}

/* animating the sun in the system */
.system-sun .sun-system-shadow-01 {
  -webkit-transform-origin: 700px 700px;
          transform-origin: 700px 700px;
}
.system-sun .sun-system-shadow-02 {
  -webkit-transform-origin: 700px 700px;
          transform-origin: 700px 700px;
}

@media (prefers-reduced-motion: no-preference) {
  /* Moon around the earth */
  .system-moonlight {
    -webkit-animation: AstralRotation 21s infinite linear;
            animation: AstralRotation 21s infinite linear;
  }

/* moon path rotation */
  .moon-path {
    -webkit-transform-origin: 700px 257px;
            transform-origin: 700px 257px;
    -webkit-animation: 21s linear infinite Rotation;
            animation: 21s linear infinite Rotation;
  }

/* planet rotation */
  .planet {
    -webkit-transform-origin: 700px 255px;
            transform-origin: 700px 255px;
    -webkit-animation: 3s linear infinite Rotation;
            animation: 3s linear infinite Rotation;
  }

/* earth rings pulsing */
  .earth-shadow-01 {
    -webkit-transform-origin: 700px 255px;
            transform-origin: 700px 255px;
    -webkit-animation: 2s linear infinite Pulsing;
            animation: 2s linear infinite Pulsing;
  }

.earth-shadow-02 {
    --a-scale-from: scale(1.05);
    --a-scale-to: scale(1);
    -webkit-transform-origin: 700px 255px;
            transform-origin: 700px 255px;
    -webkit-animation: 2s linear infinite Pulsing;
            animation: 2s linear infinite Pulsing;
  }

/* Earth around the sun */
  .system-earth-moon-container {
    -webkit-animation: 72s linear infinite Rotation;
            animation: 72s linear infinite Rotation;
  }

/* earth path rotation */
  .earth-path {
    -webkit-transform-origin: 700px 700px;
            transform-origin: 700px 700px;
    -webkit-animation: 72s linear infinite Rotation;
            animation: 72s linear infinite Rotation;
  }

/* moon rings animation */
  .system-earth-moon .moon-shadow-02 {
    --a-scale-from: scale(1.1);
    --a-scale-to: scale(1);
    -webkit-transform-origin: 700px 92px;
            transform-origin: 700px 92px;
    -webkit-animation: 2s linear infinite Pulsing;
            animation: 2s linear infinite Pulsing;
  }
  .system-earth-moon .moon-shadow-01 {
    --a-scale-from: scale(1.1);
    --a-scale-to: scale(1);
    -webkit-transform-origin: 700px 92px;
            transform-origin: 700px 92px;
    -webkit-animation: 2s linear infinite Pulsing;
            animation: 2s linear infinite Pulsing;
  }

/* animating the sun in the system */
  .system-sun .shadow-01-container {
    -webkit-transform-origin: 700px 700px;
            transform-origin: 700px 700px;
    -webkit-animation: 60s linear infinite Rotation;
            animation: 60s linear infinite Rotation;
  }
  .system-sun .shadow-02-container {
    -webkit-transform-origin: 700px 700px;
            transform-origin: 700px 700px;
    -webkit-animation: 80s linear infinite Rotation;
            animation: 80s linear infinite Rotation;
  }
  .system-sun .sun-system-shadow-01 {
    -webkit-animation: 4s linear infinite OpacityRipple;
            animation: 4s linear infinite OpacityRipple;
  }
  .system-sun .sun-system-shadow-02 {
    --a-scale-from: scale(1.1);
    --a-scale-to: scale(1.01);
    -webkit-animation: 4s linear infinite OpacityRipple;
            animation: 4s linear infinite OpacityRipple;
  }
}
@media (prefers-reduced-motion: reduce) {
  .system-moonlight {
    -webkit-animation: AstralRotation 280s infinite linear;
            animation: AstralRotation 280s infinite linear;
  }

/* moon path rotation */
  .moon-path {
    -webkit-transform-origin: 700px 257px;
            transform-origin: 700px 257px;
    -webkit-animation: 280s linear infinite Rotation;
            animation: 280s linear infinite Rotation;
  }

/* Earth around the sun */
  .system-earth-moon-container {
    -webkit-animation: 600s linear infinite Rotation;
            animation: 600s linear infinite Rotation;
  }

/* animating the sun in the system */
  .system-sun .sun-system-shadow-01 {
    --a-scale-from: scale(1);
    --a-scale-to: scale(1);
    -webkit-animation: 10s linear infinite OpacityRipple 2s;
            animation: 10s linear infinite OpacityRipple 2s;
  }
  .system-sun .sun-system-shadow-02 {
    --a-scale-from: scale(1);
    --a-scale-to: scale(1);
    -webkit-animation: 10s linear infinite OpacityRipple;
            animation: 10s linear infinite OpacityRipple;
  }
}
/* all the keyframes */
@-webkit-keyframes Pulsing {
  0% {
    -webkit-transform: var(--a-scale-from);
            transform: var(--a-scale-from);
  }
  50% {
    -webkit-transform: var(--a-scale-to);
            transform: var(--a-scale-to);
  }
  100% {
    -webkit-transform: var(--a-scale-from);
            transform: var(--a-scale-from);
  }
}
@keyframes Pulsing {
  0% {
    -webkit-transform: var(--a-scale-from);
            transform: var(--a-scale-from);
  }
  50% {
    -webkit-transform: var(--a-scale-to);
            transform: var(--a-scale-to);
  }
  100% {
    -webkit-transform: var(--a-scale-from);
            transform: var(--a-scale-from);
  }
}
@-webkit-keyframes OpacityRipple {
  0% {
    -webkit-transform: var(--a-scale-from);
            transform: var(--a-scale-from);
    opacity: 0.1;
  }
  50% {
    -webkit-transform: var(--a-scale-to);
            transform: var(--a-scale-to);
    opacity: 0.18;
  }
  100% {
    -webkit-transform: var(--a-scale-from);
            transform: var(--a-scale-from);
    opacity: 0.1;
  }
}
@keyframes OpacityRipple {
  0% {
    -webkit-transform: var(--a-scale-from);
            transform: var(--a-scale-from);
    opacity: 0.1;
  }
  50% {
    -webkit-transform: var(--a-scale-to);
            transform: var(--a-scale-to);
    opacity: 0.18;
  }
  100% {
    -webkit-transform: var(--a-scale-from);
            transform: var(--a-scale-from);
    opacity: 0.1;
  }
}
@-webkit-keyframes Rotation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes Rotation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes AstralRotation {
  to {
    offset-distance: 0%;
  }
}
@keyframes AstralRotation {
  to {
    offset-distance: 0%;
  }
}
/* This is the code for the CSS transition demo */
.svg-mask-transition {
  -webkit-clip-path: url(#clip-path);
          clip-path: url(#clip-path);
}

/* Colors that do not transition */
.sun-center,
.sun-shadow-01,
.sun-shadow-02,
.cloud {
  fill: var(--t-sun-color);
}

.sun-shadow-01 {
  opacity: 0.3;
}

.sun-shadow-02 {
  opacity: 0.2;
}

/* for both moons */
.moon-center,
.moon-shadow-01,
.moon-shadow-02 {
  fill: var(--t-moon-color);
}

.moon-shadow-01 {
  opacity: 0.1;
}

.moon-shadow-02 {
  opacity: 0.1;
}

.moon-pattern {
  fill: var(--t-moon-pattern-color);
}

/* Colors that will transition */
.circle-bg {
  fill: var(--circle-bg-color);
}

.cactus-body {
  fill: var(--cactus-body-color);
}

.cactus-flower {
  fill: var(--cactus-flower-color);
}

.mountain {
  fill: var(--mountain-color);
}

.sand-01 {
  fill: var(--sand-01-color);
}

.sand-02 {
  fill: var(--sand-02-color);
}

.sand-03 {
  fill: var(--sand-03-color);
}

.sand-04 {
  fill: var(--sand-04-color);
}

.moonlight {
  opacity: 0;
}

.rings .shadow-01,
.rings .shadow-02 {
  opacity: 0.08;
}

/* all the fill transitions */
.circle-bg,
.color-fade-transition {
  -webkit-transition: fill var(--t-slow) ease-in-out var(--t-delay-colorfades);
  transition: fill var(--t-slow) ease-in-out var(--t-delay-colorfades);
}

/* stars transition */
.star {
  fill: var(--star-color);
  opacity: 0;
  -webkit-transition: opacity var(--t-med) ease-in-out var(--t-delay-colorfades);
  transition: opacity var(--t-med) ease-in-out var(--t-delay-colorfades);
}

/* Here we go, transition the scene colors on :hover, using the CSS vars to reset the colors for every one that gets a transition */
.transition-scene:hover {
  /* recolor me tonight */
  --circle-bg-color: hsl(253, 36%, 51%);
  --cactus-body-color: hsl(282, 43%, 26%);
  --cactus-flower-color: hsl(278, 40%, 62%);
  --mountain-color: hsl(302, 36%, 37%);
  --sand-01-color: hsl(285, 43%, 28%);
  --sand-02-color: hsl(285, 45%, 34%);
  --sand-03-color: hsl(285, 47%, 35%);
  --sand-04-color: hsl(283, 43%, 42%);
  /* stars transition */
}
.transition-scene:hover .color-fade-transition {
  -webkit-transition: fill var(--t-fast) ease-in-out var(--t-delay-colorfades);
  transition: fill var(--t-fast) ease-in-out var(--t-delay-colorfades);
}
.transition-scene:hover .star {
  opacity: 1;
}

/* Motion transitions for people who did not set reduced motion to reduce  */
@media (prefers-reduced-motion: no-preference) {
  .sun {
    offset-path: path("M-20.28,5.11c43.37,0,85.45,11.09,125.07,33C143.08,59.2,177.48,89.46,207,128s52.76,83.48,69,133.5c16.79,51.8,25.3,106.82,25.3,163.54S292.78,536.8,276,588.6c-16.21,50-39.42,94.93-69,133.5S143.08,790.91,104.79,812c-39.62,21.87-81.7,33-125.07,33s-85.46-11.09-125.08-33c-38.29-21.13-72.68-51.39-102.22-89.94s-52.76-83.49-69-133.5c-16.78-51.8-25.3-106.82-25.3-163.55s8.52-111.74,25.3-163.54c16.22-50,39.42-94.93,69-133.5s63.93-68.81,102.22-89.95C-105.74,16.2-63.66,5.11-20.28,5.11m0-1c-178.16,0-322.58,188.46-322.58,420.94S-198.44,846-20.28,846,302.29,657.53,302.29,425.05,157.87,4.11-20.28,4.11Z");
    offset-distance: 1.7%;
    -webkit-transform-origin: 40px 66px;
            transform-origin: 40px 66px;
    -webkit-transition: offset-distance var(--t-med) cubic-bezier(0.33, 1, 0.68, 1) var(--t-delay-motionpath);
    transition: offset-distance var(--t-med) cubic-bezier(0.33, 1, 0.68, 1) var(--t-delay-motionpath);
  }

.cloud {
    opacity: 0.7;
    -webkit-transition: -webkit-transform var(--t-med) ease-out;
    transition: -webkit-transform var(--t-med) ease-out;
    transition: transform var(--t-med) ease-out;
    transition: transform var(--t-med) ease-out, -webkit-transform var(--t-med) ease-out;
  }

.moonlight {
    offset-path: path("M559.72,5.11c43.37,0,85.45,11.09,125.07,33C723.08,59.2,757.48,89.46,787,128s52.76,83.48,69,133.5c16.79,51.8,25.3,106.82,25.3,163.54S872.78,536.8,856,588.6c-16.21,50-39.42,94.93-69,133.5S723.08,790.91,684.79,812c-39.62,21.87-81.7,33-125.07,33s-85.46-11.09-125.08-33C396.35,790.91,362,760.65,332.42,722.1s-52.76-83.49-69-133.5c-16.78-51.8-25.3-106.82-25.3-163.55s8.52-111.74,25.3-163.54c16.22-50,39.42-94.93,69-133.5S396.35,59.2,434.64,38.06C474.26,16.2,516.34,5.11,559.72,5.11m0-1c-178.16,0-322.58,188.46-322.58,420.94S381.56,846,559.72,846,882.29,657.53,882.29,425.05,737.87,4.11,559.72,4.11Z");
    offset-distance: 23%;
    -webkit-transform-origin: 0% 6%;
            transform-origin: 0% 6%;
    -webkit-transition: all var(--t-fast) cubic-bezier(0.32, 0, 0.67, 0);
    transition: all var(--t-fast) cubic-bezier(0.32, 0, 0.67, 0);
  }

.transition-scene:hover {
    /* the motion path transitions */
  }
  .transition-scene:hover .sun {
    offset-distance: 15%;
    -webkit-transition: offset-distance var(--t-fast) cubic-bezier(0.32, 0, 0.67, 0);
    transition: offset-distance var(--t-fast) cubic-bezier(0.32, 0, 0.67, 0);
  }
  .transition-scene:hover .cloud {
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
    -webkit-transition: -webkit-transform var(--t-fast) ease-in;
    transition: -webkit-transform var(--t-fast) ease-in;
    transition: transform var(--t-fast) ease-in;
    transition: transform var(--t-fast) ease-in, -webkit-transform var(--t-fast) ease-in;
  }
  .transition-scene:hover .moonlight {
    opacity: 1;
    offset-distance: 30%;
    -webkit-transform-origin: -19% 6%;
            transform-origin: -19% 6%;
    -webkit-transition: offset-distance var(--t-med) cubic-bezier(0.33, 1, 0.68, 1) var(--t-delay-motionpath);
    transition: offset-distance var(--t-med) cubic-bezier(0.33, 1, 0.68, 1) var(--t-delay-motionpath);
  }
}
/* Let's have cool color transitions for people who do not want motion instead :) */
@media (prefers-reduced-motion: reduce) {
  .sun {
    opacity: 1;
  }

.cloud {
    opacity: 0.7;
  }

.sun,
  .cloud {
    -webkit-transition: opacity var(--t-slow) linear var(--t-delay-motionpath);
    transition: opacity var(--t-slow) linear var(--t-delay-motionpath);
  }

.moonlight {
    -webkit-transform: translate(-3%, -62%);
            transform: translate(-3%, -62%);
    -webkit-transition: opacity var(--t-fast) linear;
    transition: opacity var(--t-fast) linear;
  }

/* Smooth color transition */
  .transition-scene:hover .sun,
  .transition-scene:hover .cloud {
    opacity: 0;
  }
  .transition-scene:hover .sun,
  .transition-scene:hover .cloud {
    -webkit-transition: opacity var(--t-fast) linear;
    transition: opacity var(--t-fast) linear;
  }
  .transition-scene:hover .moonlight {
    opacity: 1;
    -webkit-transition: opacity var(--t-slow) linear var(--t-delay-motionpath);
    transition: opacity var(--t-slow) linear var(--t-delay-motionpath);
  }
}
/* Let"s have some comets raining from the sky */
.svg-defs {
  display: none;
}

.comet-rain {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.comet-instance {
  height: auto;
  position: absolute;
  left: -10vw;
  top: -10vh;
  z-index: -1;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
  fill: url(#gradient);
}

.comet-01,
.comet-03,
.comet-04,
.comet-06 {
  width: 5vmin;
}

.comet-02,
.comet-05 {
  width: 6vmin;
}

@media (prefers-reduced-motion: no-preference) {
  .comet-instance {
    -webkit-animation: MakeItRain 10s infinite;
            animation: MakeItRain 10s infinite;
  }

.comet-01 {
    left: 30vw;
    -webkit-animation-delay: 0ms;
            animation-delay: 0ms;
  }

.comet-02 {
    left: 57vw;
    -webkit-animation-delay: 9s;
            animation-delay: 9s;
  }

.comet-03 {
    left: 83vw;
    -webkit-animation-delay: 6s;
            animation-delay: 6s;
  }

.comet-04 {
    top: 13vh;
    -webkit-animation-delay: 22s;
            animation-delay: 22s;
  }

.comet-05 {
    top: 34vh;
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
  }

.comet-06 {
    top: 67vh;
    -webkit-animation-delay: 14s;
            animation-delay: 14s;
  }

@-webkit-keyframes MakeItRain {
    0% {
      opacity: 0;
      -webkit-transform: scaleX(-1) translate(0, 0);
              transform: scaleX(-1) translate(0, 0);
    }
    70% {
      opacity: 0.4;
      -webkit-transform: scaleX(-1) translate(0, 0);
              transform: scaleX(-1) translate(0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: scaleX(-1) translate(-101vw, 101vmax);
              transform: scaleX(-1) translate(-101vw, 101vmax);
    }
  }

@keyframes MakeItRain {
    0% {
      opacity: 0;
      -webkit-transform: scaleX(-1) translate(0, 0);
              transform: scaleX(-1) translate(0, 0);
    }
    70% {
      opacity: 0.4;
      -webkit-transform: scaleX(-1) translate(0, 0);
              transform: scaleX(-1) translate(0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: scaleX(-1) translate(-101vw, 101vmax);
              transform: scaleX(-1) translate(-101vw, 101vmax);
    }
  }
}
/* Layout */
body {
  padding: 2em 2em 3em 2em;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  gap: 60px;
  overflow-x: hidden;
  overflow-y: auto;
}
@media (min-width: 650px) {
  body {
    overflow: hidden;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    gap: clamp(2vw, 300px, 5vw);
    height: 100vh;
    padding: 0 5vw;
  }
}
@media (min-width: 850px) {
  body {
    padding: 0 10vw;
    gap: clamp(5vw, 400px, 10vw);
  }
}

.solar-system-animation,
.day-night-transition {
  position: relative;
  z-index: 100;
  border: var(--poster-border) solid;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-flow: column;
  -webkit-box-pack: center;
          justify-content: center;
}
@media (min-width: 650px) {
  .solar-system-animation,
  .day-night-transition {
    height: 50vh;
    width: 50%;
  }
}
@media (min-width: 850px) {
  .solar-system-animation,
  .day-night-transition {
    height: 65vh;
    width: 50%;
    max-width: 600px;
    margin-top: 0;
  }
}
@media (min-width: 650px) and (max-height: 650px) {
  .solar-system-animation,
  .day-night-transition {
    --poster-border: 30px;
    border: var(--poster-border) solid;
    border-top: 8px solid;
    height: 80vh;
    width: 80vw;
  }
}

svg.animation-scene,
svg.transition-scene {
  flex-basis: 100%;
  width: 100%;
  position: relative;
  margin: 1px auto;
  z-index: 1;
}

.explanation {
  margin-top: auto;
}

.day-night-transition,
.solar-system-animation {
  border-color: var(--poster);
  z-index: 1;
  position: relative;
}
.day-night-transition .accent,
.solar-system-animation .accent {
  color: var(--poster);
}
.day-night-transition .heading,
.day-night-transition .explanation,
.solar-system-animation .heading,
.solar-system-animation .explanation {
  background: var(--poster);
  box-shadow: 0 0 0px 1px var(--poster);
}
.day-night-transition:before, .day-night-transition:after,
.solar-system-animation:before,
.solar-system-animation:after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: calc(10px - var(--poster-border));
  left: calc(10px - var(--poster-border));
}
.day-night-transition:before,
.solar-system-animation:before {
  right: calc(0px - var(--poster-border));
  bottom: calc(0px - var(--poster-border));
  border-left: 3px solid var(--dark-cosmos-color);
  border-top: 3px solid var(--dark-cosmos-color);
  z-index: 2;
}
@media (min-width: 650px) and (max-height: 650px) {
  .day-night-transition:before,
  .solar-system-animation:before {
    top: calc(30px - var(--poster-border));
  }
}
.day-night-transition:after,
.solar-system-animation:after {
  z-index: 1;
  right: calc(0px - var(--poster-border) - 12px);
  bottom: calc(0px - var(--poster-border) - 12px);
  border-right: 3px solid var(--poster);
  border-bottom: 3px solid var(--poster);
  border-top: 3px solid var(--poster);
  border-left: 3px solid var(--poster);
}
@media (min-width: 650px) and (max-height: 650px) {
  .day-night-transition:after,
  .solar-system-animation:after {
    top: calc(30px - var(--poster-border));
  }
}

.solar-system-animation {
  --poster: hsl(265, 38%, 89%);
}

.smallnumber {
  font-size: 0.8em;
  text-align: right;
  position: relative;
  top: calc(0px - var(--poster-border) + 25px);
  right: calc(0px - var(--poster-border) + 15px);
}
@media (min-width: 650px) {
  .smallnumber {
    font-size: 1em;
    top: calc(0px - var(--poster-border) + 20px);
    right: calc(0px - var(--poster-border) + 10px);
  }
}
@media (min-width: 850px) {
  .smallnumber {
    font-size: 1.3em;
    top: calc(0px - var(--poster-border) + 30px);
    right: calc(0px - var(--poster-border) + 20px);
  }
}
@media (min-width: 650px) and (max-height: 650px) {
  .smallnumber {
    font-size: 1em;
    top: 7px;
    right: calc(0px - var(--poster-border) + 10px);
  }
}

h1,
.smallnumber {
  font-family: "Archivo Black", sans-serif;
  margin: 0;
}

h1 {
  font-size: clamp(1.8em, 3vw, 3.2em);
  letter-spacing: -0.03em;
  margin-bottom: 0;
  margin-top: -0.3em;
  position: relative;
  bottom: -0.22em;
}
@media (min-width: 650px) {
  h1 {
    bottom: -0.2em;
  }
}
@media (min-width: 650px) and (max-height: 650px) {
  h1 {
    font-size: clamp(1.5em, 8vw, 2em);
  }
}

/* Explanation */
.explanation {
  padding: 3vh 0;
  font-size: 1em;
  line-height: 1.3;
  border-bottom: 3px solid var(--dark-cosmos-color);
  position: relative;
}
@media (min-width: 850px) {
  .explanation {
    font-size: 1.1em;
    line-height: 1.4;
    padding: 3vh 0;
    margin-bottom: -0.9em;
    border-bottom: 6px solid var(--dark-cosmos-color);
  }
  .explanation:before {
    content: "";
    position: absolute;
    top: -6vh;
    left: -1.2vh;
    width: 2vh;
    height: 5vh;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluICAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTYycHgiCgkgaGVpZ2h0PSIzMjYuN3B4IiB2aWV3Qm94PSIwIDAgMTYyIDMyNi43IiBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2MiAzMjYuNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOmhzbCgyOTAsIDM0JSwgMTAlKTt9Cjwvc3R5bGU+CjxkZWZzPgo8L2RlZnM+CjxnPgoJPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iODMiIGN5PSIyNzIuNCIgcj0iNTQuMyIvPgoJPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTA3LjgiIGN5PSI1NC4zIiByPSI1NC4zIi8+Cgk8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxNC40IiBjeT0iMTIzLjgiIHI9IjE0LjQiLz4KPC9nPgo8L3N2Zz4K");
  }
  .explanation:before {
    top: -8vw;
    left: -1.3vw;
    width: 2.5vw;
    height: 16vw;
  }
}
@media (min-width: 650px) and (max-height: 650px) {
  .explanation {
    font-size: 1em;
    border-bottom: 2px solid var(--dark-cosmos-color);
  }
  .explanation:before {
    background: none;
  }
}

.accent {
  background: var(--dark-cosmos-color);
  padding: 0.2em 0.2em;
}

/* Utilities and pen background */
html {
  background: var(--dark-cosmos-color);
  color: var(--dark-cosmos-color);
}

/* collapsing the SVG on the body */
body {
  font-family: "Raleway", sans-serif;
  position: relative;
  background-size: 360px;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg