夜间模式切换之开着火箭去月球Vue3版

原始是React版g_console的react源码
已发布vue3版npm包
npm

<template><span:class="`sw-button ${modelValue ? 'is-night' : ''} ${props.className}`"v-bind="restProps"@click.capture="switchDayNight"><span class="btnInner"><span class="bg0"></span><span class="bg0 bg2"></span><span class="clouds"><span v-for="ind in 5" :class="`cloud cloud${ind + 1}`" :key="ind + 'cloud'"></span></span><span class="planet"><span class="circleNight"><span class="crater"></span><span class="crater crater2"></span><span class="crater crater3"></span></span></span><span class="clouds clouds2"><span v-for="ind in 5" :class="`cloud cloud${ind + 1}`" :key="ind + 'cloud'"></span></span><span class="night-stars"><span v-for="ind in 9" :class="`star star${ind + 1}`" :key="ind + 'star'"><Star /></span></span><span class="rocketBox"><span class="rocketInner"><Rocket /></span></span></span></span>
</template>
<script lang="tsx" setup name="DayNight">const props = defineProps({modelValue: {type: Boolean,default: false,},className: {type: String,default: '',},restProps: {type: Object,default: () => ({}),},});const emit = defineEmits(['update:modelValue']);const switchDayNight = () => {emit('update:modelValue', !props.modelValue);};const Star = ({ color = '#fff' }: { color?: string }) => {const width = 20;const half = 10; //width/2;const quat = 5; //width/4;return (<svgversion="1.1"viewBox={'0 0 ' + width + ' ' + width + ''}height={width}width={width}style={{width: '100%',height: '100%',}}><pathd={'M 0 ' +half +' c ' +quat +' 0 ' +half +' -' +quat +' ' +half +' -' +half +' c 0 ' +quat +' ' +quat +' ' +half +' ' +half +' ' +half +' c -' +quat +' 0 -' +half +' ' +quat +' -' +half +' ' +half +' c 0 -' +quat +' -' +quat +' -' +half +' -' +half +' -' +half +''}stroke={color}strokeWidth={1}fill={color}/></svg>);};const baseAttr = {stroke: '#000',strokeMiterlimit: 10,};const Rocket = () => {const st0 = { fill: '#FFFFFF', strokeWidth: 1.9843, ...baseAttr };const st1 = { fill: '#EE212A', ...baseAttr };const st2 = { fill: '#E38F1C' };const st3 = { fill: '#F5F209' };const st4 = { fill: 'none', strokeWidth: 1.4173, ...baseAttr };const st5 = { fill: '#FF0000', strokeWidth: 1.9843, ...baseAttr };const st6 = { fill: '#FFFFFF', strokeWidth: 1.7008, ...baseAttr };const st7 = { fill: 'none', strokeWidth: 1.1339, ...baseAttr };const st8 = { fill: '#EA2620', strokeWidth: 1.1339, ...baseAttr };const st9 = { fill: '#EA2620', ...baseAttr };const st10 = { fill: '#2588D8', ...baseAttr };const st15 = { fill: 'none', strokeWidth: 1.9843, ...baseAttr };const st16 = { fill: '#FFFFFF', ...baseAttr };const st17 = { fill: 'none', ...baseAttr };const st18 = { style: { opacity: 0.3 } };const st19 = { fill: '#CE4E58', strokeWidth: 1.9843, ...baseAttr };const st20 = { fill: '#A7856D', strokeWidth: 1.4173, ...baseAttr };const st21 = { fill: '#FFFFFF', strokeWidth: 1.4173, ...baseAttr };return (<svg version="1.1" viewBox="0 0 200 200"><g><g><path{...st0}d="M155.08,144.61l-3.13,10.29c0,0-1.57,2.85-9.34,0s-14.82-8.47-13.76-12.19c1.12-3.92,11.57-5.13,18.01-3.47    C155.08,141.37,155.08,144.61,155.08,144.61z"/><path{...st1}d="M156.08,152.78l1.23-4.59c0,0,1.09-1.65,4.31-1.51c3.22,0.14,11.68,7.83,11.28,9.01    c-0.39,1.17-11.4,2.29-14.18,0.48C155.83,154.29,156.08,152.78,156.08,152.78z"/><path{...st2}d="M157.26,152.57l0.94-3.5c0,0,0.75-1.1,3.2-0.99s9,5.81,8.7,6.71c-0.3,0.9-8.72,1.58-10.84,0.2    C157.05,153.55,157.26,152.57,157.26,152.57z"/><path{...st3}d="M157.53,152.11l0.76-2.82c0,0,1.15-0.5,2.15-0.43c2.03,0.14,7.28,4.35,7.03,5.09s-5.89,1.52-8.74-0.29    C157.91,153.14,157.53,152.11,157.53,152.11z"/><path {...st4} d="M146.85,139.24c0,0-4.08,5.31-4.25,15.66" /><path{...st5}d="M155.08,144.61l-3.13,10.29c0,0,1.25,1.71,3.13,1.27c1.34-0.32,4.31-9.88,3.52-11    C157.43,143.51,155.08,144.61,155.08,144.61z"/></g><g><path{...st0}d="M145.96,173.32l-3.16,10.39c0,0-1.58,2.88-9.43,0s-14.96-8.55-13.89-12.31c1.13-3.95,11.68-5.18,18.18-3.5    C145.96,170.04,145.96,173.32,145.96,173.32z"/><path{...st1}d="M146.98,181.56l1.24-4.63c0,0,1.1-1.67,4.35-1.52c3.25,0.14,11.79,7.91,11.39,9.09s-11.51,2.31-14.31,0.49    C146.72,183.09,146.98,181.56,146.98,181.56z"/><path{...st2}d="M148.16,181.35l0.95-3.53c0,0,0.75-1.11,3.23-1c2.48,0.11,9.08,5.87,8.78,6.77s-8.8,1.59-10.94,0.2    C147.95,182.34,148.16,181.35,148.16,181.35z"/><path{...st3}d="M148.44,180.89l0.76-2.85c0,0,1.16-0.5,2.17-0.43c2.05,0.14,7.35,4.39,7.1,5.14s-5.94,1.54-8.82-0.3    C148.82,181.92,148.44,180.89,148.44,180.89z"/><path {...st4} d="M137.66,167.9c0,0-4.12,5.36-4.29,15.81" /><path{...st5}d="M145.96,173.32l-3.16,10.39c0,0,1.26,1.73,3.16,1.28c1.36-0.32,4.35-9.98,3.56-11.11    C148.34,172.2,145.96,173.32,145.96,173.32z"/></g><g><path{...st6}d="M143.78,169.24c0,0-26.42,12.65-65.67,2.23s-61.4-36.09-60.84-41.49c0.56-5.4,31.07-18.05,70.88-8.93    s58.23,36.28,58.23,36.28C146.75,163.12,146.08,165.79,143.78,169.24z"/><path{...st7}d="M101.77,175.37c25.84,1.62,42.01-6.13,42.01-6.13c2.3-3.45,2.97-6.12,2.6-11.91c0,0-10.69-15.76-33.37-27.3    c0,0-4.95,6.14-8.58,21.63S101.77,175.37,101.77,175.37z"/><path{...st8}d="M39.45,153.84c-14.72-10.14-22.51-20.62-22.18-23.85c0.35-3.37,12.4-9.58,31.11-11.53    c0,0-5.06,7.5-7.29,16.74C39.2,143.01,39.45,153.84,39.45,153.84z"/></g><g><path{...st0}d="M152.22,158.01l-3.91,12.84c0,0-1.95,3.56-11.65,0c-9.7-3.56-18.49-10.56-17.16-15.21    c1.39-4.88,14.44-6.4,22.46-4.33C152.22,153.96,152.22,158.01,152.22,158.01z"/><path{...st1}d="M153.48,168.19l1.53-5.72c0,0,1.36-2.06,5.37-1.88c4.01,0.17,14.56,9.77,14.07,11.23    c-0.49,1.47-14.22,2.86-17.68,0.6C153.16,170.08,153.48,168.19,153.48,168.19z"/><path{...st2}d="M154.94,167.93l1.17-4.36c0,0,0.93-1.37,3.99-1.24s11.22,7.25,10.85,8.37s-10.87,1.97-13.52,0.25    C154.68,169.16,154.94,167.93,154.94,167.93z"/><path{...st3}d="M155.28,167.36l0.94-3.52c0,0,1.43-0.62,2.68-0.53c2.53,0.18,9.08,5.42,8.77,6.35s-7.34,1.9-10.9-0.37    C155.76,168.64,155.28,167.36,155.28,167.36z"/><path {...st4} d="M136.66,170.85c0.21-12.91,5.3-19.53,5.3-19.53" /><path{...st5}d="M152.22,158.01l-3.91,12.84c0,0,1.55,2.14,3.91,1.58c1.67-0.4,5.37-12.33,4.4-13.72    C155.16,156.63,152.22,158.01,152.22,158.01z"/></g><circle {...st9} cx="69.55" cy="142.11" r="17.02" /><circle {...st10} cx="69.55" cy="142.11" r="10.89" /></g><g class="humanBox"><g class="human"><Head class="head0" /><g><path{...st0}d="M135.8,72.59c0,0,2.82,22.25,0,27.21s-8.65,5.35-10.34,5.53s-3.01-31.42-3.01-31.42L135.8,72.59z"/><path{...st0}d="M87.97,68.5c0,0,0,10.74-1.12,14.79c-1.12,4.05-6.14,6.56-10.19,10.05s-8.93,10.74-8.79,18.42   s7.95,16.74,17.58,0c0,0,2.79-4.19,7.53-6c4.74-1.81,14.93,2.79,16.88,6s0.84,10.19,2.79,17.44c1.95,7.26,11.86,12,14.65-3.91   s2.09-42,1.4-48.14c0,0,8.37-1.26,14.65-2.37s13.4-1.81,13.4-7.67c0-5.86-11.16-5.86-15.49-6c-1.18-0.04-5.03-0.14-10.19-0.14   c-2.58,0-3.13,10.36-21.97,11.51c-12.72,0.12-17.39-8.05-19.77-10.45c-0.29-0.29-1.65-0.37-1.65-0.37s20.93,1.12,20.23-9.21   c-0.7-10.33-18.98-7.81-25.81-5.44S68.92,64.1,87.62,70.94L87.97,68.5z"/><path {...st15} d="M71.36,99.8c0,0,11.21,2.07,14.78,11.06" /><path {...st15} d="M111.19,117.84c0,0,10.52-4.78,16.88,2.24" /><path {...st15} d="M141.27,61.1c0,0-0.28,8.37,2.09,13.67" /><path {...st15} d="M91.36,45.1c0,0-1.92,11.19,2.33,16.42" /></g><g><path{...st16}d="M91.98,80.43c0,0-3.09-1.43-4.81-1.34c-1.73,0.09-4.12,3.23-1.62,5.08c2.49,1.85,6.91,0.7,6.91,0.7   L91.98,80.43z"/><path{...st16}d="M89.5,92.15c0.54,1.43,23.02,5.37,25.47,4.53c2.44-0.84,3.7-14.09,3-15.7c-0.7-1.6-23.86-5.65-25.26-4.88   S88.87,90.47,89.5,92.15z"/><path{...st16}d="M116.78,90.89c-1.63-1.06-2.16-4.93,0.91-4.49c3.07,0.44,6.88,1.55,11.37,0.13c1.61-0.84,5.93,0.9,1.54,3.88   C126.2,93.4,118.18,91.8,116.78,90.89z"/><path{...st17}d="M98.29,77.01c0,0-1.6,7.19-1.19,8.79c0.42,1.6,1.95,0.14,2.72,1.33c0.77,1.19-0.84,7.68-0.84,7.68"/><path {...st17} d="M113.81,79.41c0,0,0.9,9.18-2.98,17.2" /></g><g {...st18}><path d="M69.4,117.85c0,0,2.56,5.24,10.28,1.56c0,0,20.15,2.91,33.1,10.18c0,0,1.65,7.88,9.91,6.04c0,0,2.24,0.53,3.02,1.95   c0,0-31.88,5.94-59.32-19.72H69.4z" /><path d="M85.91,111.14c0,0-6.84,14.09-14.12,8.94s-2.86-14.82,0-20.98c0,0,2.76,12.27,8.65,9.53s11.14-12.41,18.09-11.04   c6.95,1.37,12.98,5.75,14.89,15.97s10.59,10.03,14.55,7.25c0,0-1.15,15.22-8.35,15.07c-7.21-0.15-8.99-13.64-8.8-17.71   C111.19,110.18,98.54,97.58,85.91,111.14z" /><path d="M129.18,104.33c0,0,6.9-1.39,7.38-6.88c0,0-4.39,3.31-7.25,1.22L129.18,104.33z" /><path d="M89.93,63.95c0,0,15.38,20.48,39.57-0.45C129.5,63.5,104.53,94.43,89.93,63.95z" /></g></g></g><g {...st18}><path d="M131.4,169.37c-66.45,4.31-102.89-28-113.99-39.95c-0.08,0.18-0.12,0.36-0.14,0.53c-0.56,5.4,21.58,31.07,60.84,41.49   c26.96,7.16,47.88,3.48,58.31,0.39C139.14,171.02,135.63,169.1,131.4,169.37z" /><path d="M69.55,159.13c-9.4,0-17.02-7.62-17.02-17.02c0-0.98,0.1-1.93,0.26-2.86c-0.43,1.49-0.67,3.05-0.67,4.68   c0,9.4,7.62,17.02,17.02,17.02c8.43,0,15.4-6.13,16.76-14.16C83.87,153.91,77.33,159.13,69.55,159.13z" /><path d="M148.32,170.85l3.91-12.84c0,0,0-0.58-0.56-1.45c-0.65,4.27-2.78,10.73-9.7,11.33c-7.1,0.62-16.89-7.32-22.4-12.43   c-0.02,0.06-0.05,0.11-0.06,0.17c-1.33,4.64,7.46,11.65,17.16,15.21C146.36,174.4,148.32,170.85,148.32,170.85z" /><path d="M142.35,183.89l2.91-9.57c0,0-2.49,6.92-7.65,7.37c-5.29,0.46-12.59-5.46-16.7-9.27c-0.01,0.04-0.03,0.08-0.05,0.13   c-0.99,3.46,5.56,8.69,12.79,11.34C140.89,186.55,142.35,183.89,142.35,183.89z" /><path d="M151.31,155.17l3.74-11.95c0,0-2.86,7.11-7.5,7.18c-3.91,0.06-7.69-2.86-9.58-3.57c-0.01,0.04-1.44,2.33,5.79,4.98   C150.98,154.47,151.31,155.17,151.31,155.17z" /><path d="M130.01,174.01c0,0,4.62,2.37,6.66,1.16c0,0,5.45,2.87,7.72,0.39s1.16-2.61,1.16-2.61l-8.16-1.37L130.01,174.01z" /></g><g class="human2"><g class="hand-flag"><path{...st19}d="M174.48,40.18L163.73,65.3c0,0-9.63-4.19-13.67-10.88c-4.05-6.7-12.7-7.95-20.51-6.28l7.26-25.12   c0,0,14.93-7.67,22.6,4.05S170.43,38.23,174.48,40.18z"/><path{...st20}d="M117.1,76.88l17.89-56.65c0,0,3.98-5.02,4.19,1.4c-1.4,6.42-17.58,56.65-17.58,56.65S117.35,83.3,117.1,76.88   z"/></g><path{...st0}d="M120.21,90.81c0,0,3.21,16.07,2.96,22.5c-0.26,6.43-6.04,12.6-14.53,9.26S111.47,88.24,120.21,90.81z"/><path{...st0}d="M76.12,107.78c-0.26,2.83-13.75,6.81-14.01,9.9c0,0,13.63,1.67,21.6,0.9c0,0-11.05,1.29-9.77,11.7   c1.29,10.41,7.71,15.81,11.57,11.57c3.86-4.24,3.34-9.13,8.23-11.95c4.88-2.83,9.38,0.04,15.17-4.35   c5.78-4.39,6.04-19.17,4.76-25.73c0,0,9.38-5.91,13.24-18.12c3.86-12.21-5.78-13.63-13.75-5.14s-11.05,13.37-21.98,15.43   s-21.82-2.73-26.99-6.3c-5.78-3.98-22.24-0.77-4.63,13.24C72.32,109.08,76.38,104.95,76.12,107.78z"/><path {...st4} d="M64.42,86.06c0,0,0,7.71-4.88,12.08" /><path {...st4} d="M110.44,80.14c0,0,3.73,7.84,11.95,11.05" /><path{...st21}d="M93.6,115.88l0.51-16.45c0,0-20.95-1.03-22.24,1.54c-1.29,2.57-1.67,11.44,0,12.98   C73.55,115.49,93.6,115.88,93.6,115.88z"/><line {...st4} x1="88.97" y1="99.3" x2="88.97" y2="115.75" /><polyline {...st4} points="82.44,99.3 82.44,107.08 80.36,108.55 80.36,114.59  " /><path {...st4} d="M74.32,125.78c0,0,11.44-3.34,16.71,5.78" /><path{...st21}d="M94.12,110.22c6.52,1.17,17.12,0.9,20.3,0.51c2.74-0.34,4.64-6.81-0.76-5.27c-5.4,1.54-17.13,0.74-19.54,0.64   C91.71,106.01,89.1,109.32,94.12,110.22z"/><Head class="head2" /><g {...st18}><path d="M74.32,132.57c0,0,2.79,3.42,6.69,3.14s4.55-7.94,8.69-10.53c4.14-2.59,13.77-0.39,23.82-10.59c0,0,0.91,6.82-4.88,10.59   c-5.79,3.76-15.01,2.51-17.38,6c-2.37,3.49-5.23,13.71-9.27,12.12C77.93,141.71,75.59,137.18,74.32,132.57z" /><path d="M114,116.66c0,0,4.08,1.78,8.76-3.98c0,0,0.59,11.06-10.67,10.82L114,116.66z" /><path d="M70.76,108.15c0,0,8.78,4.72,22.84,2.37v5.35c0,0-20.39-0.21-21.83-2.04C70.34,112.01,70.76,108.15,70.76,108.15z" /><path d="M113.56,100.13c0,0-0.68-2.72-1.8-4.4c-1.12-1.67,6.54-1.76,15.26-16.9C127.03,78.83,128.55,88.55,113.56,100.13z" /><path d="M71.49,102.03l-0.78,3.5c0,0-12.42-4.78-17.81-13.42C52.9,92.1,58.42,97.5,71.49,102.03z" /><path d="M43.78,118.59c0,0,16.18-2.35,36.66,0.02c0,0-11.79,5.4-5.06,17.11s9.76,8.74,17.05-5.65c0.8-1.58,10.03-2.65,13.83-3.17   c1.41-0.19,4.41,1.97,4.41,1.97s-0.17,1.01-2.16,1.66c-4.14,1.36-11.34,1.03-13.71,3.78c-4.33,5.02-3.9,9.48-8.09,11.77   c-4.41,2.42-17.05,1.69-17.17-17.05c-0.07-10.93-16.74-6.44-21.77-7.55C42.77,120.36,43.78,118.59,43.78,118.59z" /></g></g></svg>);};const Head = (attr) => {const st7 = { fill: 'none', strokeWidth: 1.1339, ...baseAttr };const st11 = { fill: '#F5F4F5', ...baseAttr };const st12 = { fill: '#263753', ...baseAttr };const st13 = { fill: '#FFFFFF', strokeWidth: 0.8504, ...baseAttr };const st14 = { fill: '#D1D2D3' };return (<g {...attr}><circle {...st11} cx="109.97" cy="47.67" r="24.76" /><path{...st7}d="M129.7,48.89c0,12.45-9.77,21.83-23.26,21.83c-11.34,0-20.83-9.38-20.83-21.83s9.19-22.54,20.53-22.54 S129.7,36.45,129.7,48.89z"/><path{...st12}d="M127.27,48.89c0,13.7-10.8,19.93-23.03,19.93c-10.28,0-18.62-8.92-18.62-19.93s8.34-19.93,18.62-19.93 S127.27,36.27,127.27,48.89z"/><ellipse {...st13} cx="132.12" cy="50.57" rx="6.65" ry="9.14" /><ellipse {...st13} cx="133.42" cy="50.81" rx="4.88" ry="7.29" /><path{...st14}d="M108.4,31.99c0,0-18.36,2.93-17.52,21.29C90.88,53.28,81.24,27.97,108.4,31.99z"/><ellipse {...st14} cx="119.26" cy="46.08" rx="3.48" ry="4.02" /><ellipse {...st14} cx="119.2" cy="53.64" rx="1.48" ry="1.74" /></g>);};
</script>
<style lang="scss">$btnW: 270px;$btnH: 120px;$paddingL: 16px;$time: 0.8s;@keyframes headAnimate {0% {transform: rotate(13deg);}10% {transform: rotate(13deg);}50% {transform: rotate(-15deg);}60% {transform: rotate(-15deg);}100% {transform: rotate(13deg);}}@keyframes humanAnimate {0% {transform: rotate(4deg);}40% {transform: rotate(-6deg);}50% {transform: rotate(-6deg);}90% {transform: rotate(4deg);}100% {transform: rotate(4deg);}}@keyframes flagAnimate {0% {transform: rotate(10deg);}50% {transform: rotate(-20deg);}100% {transform: rotate(10deg);}}.btnInner {transition: all $time ease-in-out;line-height: 0;display: inline-block;position: relative;height: $btnH;width: $btnW;border-radius: 100px;box-shadow: inset 0 2px 5px rgb(0 0 0 / 20%), 0 0 9px rgb(0 0 0 / 30%);overflow: hidden;}.bg0 {transition: all $time ease-in-out;display: inline-block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;//background: linear-gradient(left, #9db8f7 0%, #4f77ce 100%);background: linear-gradient(to right, #9db8f7 0%, #4f77ce 100%);opacity: 100%;&.bg2 {//background: linear-gradient(left, #043789 30%, #020914 100%);background: linear-gradient(to right, #043789 30%, #020914 100%);opacity: 0;}}.planet {transition: all $time ease-in-out;position: absolute;overflow: hidden;width: $btnH - $paddingL - $paddingL;height: $btnH - $paddingL - $paddingL;top: $paddingL;left: $paddingL;background: #f6cf5b;border-radius: 100px;box-shadow: 0 0 3px rgb(255 255 255 / 60%), inset -0.5px -1px 3px rgb(0 0 0 / 30%),inset 1px 1px 3px rgb(255 255 255 / 50%);.circleNight {transition: all $time ease-in-out;transform: rotate(60deg) scale(1.7);opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 100px;background: #f1f1f1;box-shadow: 0 0 5px rgb(0 0 0 / 60%), inset -0.5px -1px 12px rgb(0 0 0 / 50%),inset 1px 1px 2px rgb(255 255 255 / 80%);}.crater {position: absolute;width: 25%;height: 25%;top: 12%;left: 44%;border-radius: 100px;background: #f1f1f1;box-shadow: inset $btnH * 0.042 $btnH * 0.042 $btnH * 0.065 rgb(12 8 146 / 19%),0 0 $btnH * 0.026 rgb(113 116 122 / 30%);&.crater2 {width: 34%;height: 34%;top: 42%;left: 16%;}&.crater3 {width: 19%;height: 19%;top: 62%;left: 63%;box-shadow: inset $btnH * 0.022 $btnH * 0.022 $btnH * 0.052 rgb(12 8 146 / 13%),0 0 $btnH * 0.02 rgb(113 116 122 / 30%);}}}.clouds {transition: all $time ease-in-out;position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 30%;transition-delay: 0s;&.clouds2 {transition-delay: $time * 0.2;opacity: 100%;.cloud {transform: scale(0.82);&.cloud2 {transform: scale(0.9);top: 60%;left: 62.5%;}&.cloud4 {transform: scale(0.75);top: 60%;left: 10%;}&.cloud5 {transform: scale(1);top: 74%;left: 62%;}}}.cloud {position: absolute;background: #fff;border-radius: 100px;width: $btnH * 0.8;height: $btnH * 0.8;top: 12%;left: 77%;&.cloud2 {width: $btnH * 0.55;height: $btnH * 0.55;top: 56%;left: 62%;}&.cloud3 {width: $btnH * 0.85;height: $btnH * 0.85;top: 42%;left: 32%;}&.cloud4 {width: $btnH * 0.9;height: $btnH * 0.9;top: 64%;left: 10%;}&.cloud5 {width: $btnH * 0.9;height: $btnH * 0.9;top: 60%;left: 70%;}}}.night-stars {transition: all $time * 0.5 ease-in-out;transition-delay: $time * 0.2;transform: scale(1.2);opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;.star {display: inline-block;position: absolute;left: 28%;top: 13%;width: 4px;opacity: 80%;&.star2 {left: 10%;top: 35%;opacity: 100%;width: 6px;}&.star3 {left: 22%;top: 39%;width: 10px;opacity: 90%;}&.star4 {left: 13%;top: 75%;}&.star5 {left: 30%;top: 56%;}&.star6 {left: 43%;top: 31%;opacity: 80%;}&.star7 {left: 54%;top: 25%;width: 9px;}&.star8 {left: 41%;top: 79%;width: 6px;}&.star9 {left: 52%;top: 50%;width: 7px;}}}.rocketBox {transition: all $time * 1.3 ease-in-out;transition-delay: $time * 0.1;display: inline-block;position: absolute;width: $btnH * 0.8;top: 24%;left: 61%;opacity: 100%;.rocketInner {display: inline-block;position: absolute;width: 100%;transition: all $time * 0.3 ease-in-out;}}.hand-flag {animation: flagAnimate 1s infinite;transform-origin: 59% 36%;}.humanBox {opacity: 0;transform: rotateY(90deg);transform-origin: 50%;transition: all $time * 0.3 ease-in-out;}.human2 {opacity: 100%;transform-origin: 50%;transition: all $time * 0.3 ease-in-out;}.head2 {transform: translate(-11%, 10%) rotate(-5deg) scale(1.2);transform-origin: 57% 30%;}.is-night {.bg0 {opacity: 0;&.bg2 {opacity: 100%;}}.planet {left: $btnW - $btnH + $paddingL;.circleNight {transform: rotate(0deg) scale(1);opacity: 100%;}}.clouds {top: 100%;transition-delay: $time * 0.2;&.clouds2 {transition-delay: 0s;}}.night-stars {transform: scale(1);opacity: 100%;transition-delay: $time * 0.7;}.rocketBox {top: -24%;left: -32%;transform: scale(0.6);}}.sw-button {display: inline-block;line-height: 0;cursor: pointer;&:hover {.head0 {animation: headAnimate 1s infinite;transform-origin: 57% 30%;}.humanBox {opacity: 100%;transform: rotateY(0deg);}.human {animation: humanAnimate 1s infinite;transform-origin: 50% 56%;}.human2 {opacity: 0;transform: rotateY(90deg);}.rocketBox {.rocketInner {transform: translate(-6px, -3px);}}}}
</style>

夜间模式切换之开着火箭去月球Vue3版相关推荐

去月球“挖土”咯！今天发射的嫦娥五号实现四个“首次”，下个月将样品带回地球...
蕾师师发自凹非寺量子位报道 | 公众号 QbitAI "5.4.3.2.1--点火!" 随着一声巨响,烟尘四起,一道闪亮的光芒划破夜空. 嫦娥五号探测器在今日凌晨4时30 ...
趣味编程Python之折纸去月球！！！
折纸上月球,最小距离是363300公里.现在我们都想去月球旅游,但是坐火箭上天一次就带辣么几个人,我们等不及.好消息,好消息,厂家现在开发出逆天神技--折纸上月球!只需一张很大的A4纸,厚度为0.08 ...
去月球“你知道戴维会变身成哪种动物吗？”
在<去月球>游戏中,有一节会遇到一个问题: "你知道戴维会变身成哪种动物吗?" (请用英语大写字母回答) 其实这个答案,和上面的回忆对话,就能知道了,看下图答案就是: ...
【设计】拟物时钟-夜间模式切换
先看效果: HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> ...
android夜间切换失败,Android夜间模式切换记录
使用AndroidSDK自带的support lib来实现APP日间/夜间模式的切换添加依赖包appcompat-v7 在app module的gradle中依赖appcompat库,版本最低是23 ...
剧情游戏《去月球》随感（待完善）
[提示]如果你不知道这是个什么文章,你可以把它理解为一篇读书笔记.该文章尚不成熟,我可能会在未来的某个时间迭代修改. 一部经典胜过千部庸俗作品.一个好的游戏作品也胜过千个没营养的.追求短暂刺激的.浪费 ...
C#练习题答案: 折叠用自己的方式去月球【难度：1级】--景越C#经典编程题库,1000道C#基础练习题等你来挑战
折叠用自己的方式去月球[难度:1级]: 答案1: using System; using System.Collections.Generic;public class Kata {public st ...
【音乐随想】带我去月球
前几天碰巧看到央视播放的一期"嫦娥探月卫星"节目,要不是听到节目结尾播放的这首歌曲, 我还不会想起去推荐张雨声的<带我去月球>. 有时候觉得央视那帮人还有点水平, 通常 ...
嫦娥四号为什么去月球背面探测？总设计师回应
中新网1月14日电嫦娥四号任务探测器总设计师孙泽洲14日表示,此次嫦娥四号去月球背面探测,以及未来可能的月球极区的到达,代表着我们在月球上可以获得更多原来没有精细获得的数据,也便于我们更好地了解月球 ...

夜间模式切换之开着火箭去月球Vue3版

夜间模式切换之开着火箭去月球Vue3版相关推荐

最新文章

热门文章