前言：感谢大家的关注和支持，我后面会不定期发一些css以及js特效，视频会发在DouYin：可乐鸡翅；然后代码都会免费发在这个账号上（以后代码多的话，会发git）；
又看到一个气死前端的按钮，这个按钮里面放了个飞机，效果其实比较简单，所以我把飞机换成了动态火箭，增加点趣味性。
火箭和宇航员都是用AI描的svg，对不同部位代码分组后就可以单独控制动效了。
上代码：
React:
import cx from 'classnames';
import React from 'react';
import styles from './index.less';
const Star = ({
color = '#fff'
}: {
color?: string
}) => {
const width = 20;
const half = 10 //width/2;
const quat = 5 //width/4;
return <svg version="1.1"
viewBox={"0 0 "+width+" "+width+""}
height={width} width={width} style={{
width: '100%',
height: '100%'
}}
>
<path
d={"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 Head = ({
className
}:{
className?: string;
}) => {
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 className={className}>
<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>
}
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 className={styles.humanBox}>
<g className={styles.human}>
<Head className={styles.head}/>
<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 className={styles.human2}>
<g className={styles.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 className={styles.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>
}
interface ViewProps extends React.HTMLAttributes<HTMLSpanElement> {
active?: boolean;
}
export default class ButtonDayNight3 extends React.Component<ViewProps> {
public render() {
const { active, className, children, ...restProps } = this.props;
return (
<span className={cx(styles.button, {[styles.night]: active}, className)} {...restProps}>
<span className={styles.btnInner}>
<span className={styles.bg}></span>
<span className={cx(styles.bg, styles.bg2)}></span>
<span className={styles.clouds}>
{new Array(5).fill(1).map((e, ind) => (
<span className={cx(styles.cloud, styles['cloud'+(ind+1)])} key={ind+'cloud'} />
))}
</span>
<span className={styles.circle}>
<span className={styles.circleNight}>
<span className={styles.crater} />
<span className={cx(styles.crater, styles.crater2)} />
<span className={cx(styles.crater, styles.crater3)} />
</span>
</span>
<span className={cx(styles.clouds, styles.clouds2)}>
{new Array(5).fill(1).map((e, ind) => (
<span className={cx(styles.cloud, styles['cloud'+(ind+1)])} key={ind+'cloud'} />
))}
</span>
<span className={styles.stars}>
{new Array(9).fill(1).map((e, ind) => (
<span className={cx(styles.star, styles['star'+(ind+1)])} key={ind+'star'}><Star /></span>
))}
</span>
<span className={styles.rocketBox}>
<span className={styles.rocketInner}>
<Rocket />
</span>
</span>
</span>
</span>
);
}
}Less:
@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);}
}
.button {
display: inline-block;
line-height: 0;
cursor: pointer;
}
.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 rgba(0,0,0,0.2), 0 0 9px rgba(0,0,0,0.3);
overflow: hidden;
}
.bg {
transition: all @time ease-in-out;
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: -webkit-linear-gradient(left, #9db8f7 0%, #4f77ce 100%);
background: linear-gradient(to right, #9db8f7 0%, #4f77ce 100%);
opacity: 1;
&.bg2 {
background: -webkit-linear-gradient(left, #043789 30%, #020914 100%);
background: linear-gradient(to right, #043789 30%, #020914 100%);
opacity: 0;
}
}
.circle {
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: 0px 0px 3px rgba(255,255,255,0.6), inset -0.5px -1px 3px rgba(0,0,0,0.3), inset 1px 1px 3px rgba(255,255,255,0.5);
.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: 0px 0px 5px rgba(0,0,0,0.6), inset -0.5px -1px 12px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.8);
}
.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 rgba(12, 8, 146, 0.19), 0px 0px @btnH * 0.026 rgba(113, 116, 122, 0.3);
&.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 rgba(12, 8, 146, 0.13), 0px 0px @btnH * 0.02 rgba(113, 116, 122, 0.3);
}
}
}
.clouds {
transition: all @time ease-in-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
transition-delay: 0s;
&.clouds2 {
transition-delay: @time * 0.2;
opacity: 1;
.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%;
}
}
}
.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: 0.8;
&.star2 {
left: 10%;
top: 35%;
opacity: 1;
width: 6px;
}
&.star3 {
left: 22%;
top: 39%;
width: 10px;
opacity: 0.9;
}
&.star4 {
left: 13%;
top: 75%;
}
&.star5 {
left: 30%;
top: 56%;
}
&.star6 {
left: 43%;
top: 31%;
opacity: 0.8;
}
&.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: 1;
.rocketInner {
display: inline-block;
position: absolute;
width: 100%;
transition: all @time * 0.3 ease-in-out;
}
}
.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: 1;
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%;
}
.night {
.bg {
opacity: 0;
&.bg2 {
opacity: 1;
}
}
.circle {
left: @btnW - @btnH + @paddingL;
.circleNight {
transform: rotate(0deg) scale(1);
opacity: 1;
}
}
.clouds {
top: 100%;
transition-delay: @time * 0.2;
&.clouds2 {
transition-delay: 0s;
}
}
.stars {
transform: scale(1);
opacity: 1;
transition-delay: @time * 0.7;
}
.rocketBox {
top: -24%;
left: -32%;
transform: scale(0.6);
}
}
.button {
&:hover {
.head {
animation: headAnimate 1s infinite;
transform-origin: 57% 30%;
}
.humanBox {
opacity: 1;
transform: rotateY(0deg);
}
.human {
animation: humanAnimate 1s infinite;
transform-origin: 50% 56%;
}
.human2 {
opacity: 0;
transform: rotateY(90deg);
}
.rocketBox {
.rocketInner {
transform: translate(-6px, -3px);
}
}
}
}
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
