svg分页切换效果

下载代码

html

css

分享到微信朋友圈

html

css

body {
	align-items:center;
	background:#3775ac;
	display:flex;
	flex-direction:column;
	justify-content:center;
	height:100vh;
	margin:0;
}
.control {
	display:flex;
}
.button {
	cursor:pointer;
	margin-bottom:32px;
	padding:20px;
}
.button:active {
	transform:scale(0.9);
}
.plus {
	margin-right:20px;
}
.pagination {
	clip-path:polygon(6.11525% 95%,6.32893% 95.005%,6.54262% 95%,6.75631% 95.005%,6.97% 95%,6.9705% 91.93676%,6.97% 88.87353%,6.9705% 85.8103%,6.97% 82.74707%,6.9705% 79.78413%,6.97% 76.82119%,6.9705% 73.85825%,6.97% 70.89531%,6.9705% 67.63515%,6.97% 64.375%,6.97025% 61.11485%,6.9705% 57.85469%,6.97% 54.89175%,6.9705% 51.92881%,6.97% 48.96587%,6.9705% 46.00293%,6.97% 42.9397%,6.9705% 39.87647%,6.97% 36.81323%,6.9705% 33.75%,6.97% 31.5625%,6.9705% 29.375%,6.97% 27.1875%,6.9705% 25%,6.62% 25.005%,6.27% 25%,5.92% 25.005%,5.57% 25%,5.2275% 26.15%,4.885% 27.3%,4.5425% 28.45%,4.2% 29.6%,4.3% 33.15%,4.4% 36.7%,4.5% 40.25%,4.6% 43.8%,4.77% 43.275%,4.94% 42.75%,5.11% 42.225%,5.28% 41.7%,5.2805% 45.03125%,5.28% 48.3625%,5.2805% 51.69375%,5.28% 55.025%,5.2805% 58.35625%,5.28% 61.6875%,5.2805% 65.01875%,5.28% 68.35%,5.2805% 71.68125%,5.28% 75.0125%,5.2805% 78.34375%,5.28% 81.675%,5.2805% 85.00625%,5.28% 88.3375%,5.2805% 91.66875%,5.28% 95%,5.48881% 95.005%,5.69762% 95%,5.90643% 95.005%);
}
.cut {
	clip-path:polygon(0% 120%,0.0005% 0%,12% 0.005%,12.0005% 120%,29% 120.005%,29.0005% 0%,41% 0.005%,41.0005% 120%,58% 120.005%,58.0005% 0%,70% 0.005%,70.0005% 120%,86% 120.005%,86.0005% 0%,98% 0.005%,98.0005% 120.005%);
}
.c1,.c2,.c3,.c4 {
	fill:#a0b6ce;
	transform:scale(.5);
	transition:fill 360ms 40ms,transform 360ms 40ms;
}
.c1 {
	transform-origin:5% 50%;
	fill:#fff;
	transform:scale(1);
}
.c2 {
	transform-origin:35% 50%;
}
.c3 {
	transform-origin:65% 50%;
}
.c4 {
	transform-origin:95% 50%;
}
.go1to2 .pagination {
	animation:Go1to2 400ms linear both;
}
.go1to2 .c1 {
	fill:#a0b6ce;
	transform:scale(.5);
}
.go1to2 .c2 {
	fill:#fff;
	transform:scale(1);
}
.go2to1 .pagination {
	animation:Go2to1 400ms linear both;
}
.go2to1 .c1 {
	fill:#fff;
	transform:scale(1);
}
.go2to3 .pagination {
	animation:Go2to3 400ms linear both;
}
.go2to3 .c1 {
	fill:#a0b6ce;
	transform:scale(.5);
}
.go2to3 .c3 {
	fill:#fff;
	transform:scale(1);
}
.go3to2 .pagination {
	animation:Go3to2 400ms linear both;
}
.go3to2 .c1 {
	fill:#a0b6ce;
	transform:scale(.5);
}
.go3to2 .c2 {
	fill:#fff;
	transform:scale(1);
}
.go3to4 .pagination {
	animation:Go3to4 400ms linear both;
}
.go3to4 .c1 {
	fill:#a0b6ce;
	transform:scale(.5);
}
.go3to4 .c4 {
	fill:#fff;
	transform:scale(1);
}
.go4to3 .pagination {
	animation:Go4to3 400ms linear both;
}
.go4to3 .c1 {
	fill:#a0b6ce;
	transform:scale(.5);
}
.go4to3 .c3 {
	fill:#fff;
	transform:scale(1);
}
@keyframes Go1to2 {
	0% {
	clip-path:polygon(6.11525% 95%,6.32893% 95.005%,6.54262% 95%,6.75631% 95.005%,6.97% 95%,6.9705% 91.93676%,6.97% 88.87353%,6.9705% 85.8103%,6.97% 82.74707%,6.9705% 79.78413%,6.97% 76.82119%,6.9705% 73.85825%,6.97% 70.89531%,6.9705% 67.63515%,6.97% 64.375%,6.97025% 61.11485%,6.9705% 57.85469%,6.97% 54.89175%,6.9705% 51.92881%,6.97% 48.96587%,6.9705% 46.00293%,6.97% 42.9397%,6.9705% 39.87647%,6.97% 36.81323%,6.9705% 33.75%,6.97% 31.5625%,6.9705% 29.375%,6.97% 27.1875%,6.9705% 25%,6.62% 25.005%,6.27% 25%,5.92% 25.005%,5.57% 25%,5.2275% 26.15%,4.885% 27.3%,4.5425% 28.45%,4.2% 29.6%,4.3% 33.15%,4.4% 36.7%,4.5% 40.25%,4.6% 43.8%,4.77% 43.275%,4.94% 42.75%,5.11% 42.225%,5.28% 41.7%,5.2805% 45.03125%,5.28% 48.3625%,5.2805% 51.69375%,5.28% 55.025%,5.2805% 58.35625%,5.28% 61.6875%,5.2805% 65.01875%,5.28% 68.35%,5.2805% 71.68125%,5.28% 75.0125%,5.2805% 78.34375%,5.28% 81.675%,5.2805% 85.00625%,5.28% 88.3375%,5.2805% 91.66875%,5.28% 95%,5.48881% 95.005%,5.69762% 95%,5.90643% 95.005%);
}
33.33% {
	clip-path:polygon(14.5% 75%,14.65337% 74.92255%,14.8023% 74.69525%,14.94605% 74.32565%,15.08387% 73.82124%,15.21499% 73.1896%,15.33866% 72.43825%,15.45414% 71.57475%,15.56066% 70.60662%,15.65747% 69.54142%,15.74382% 68.38666%,15.81896% 67.14991%,15.88212% 65.83869%,15.93256% 64.46056%,15.96952% 63.02304%,15.99225% 61.53368%,16% 60%,15.99226% 58.46634%,15.96953% 56.97698%,15.93256% 55.53946%,15.88212% 54.16132%,15.81896% 52.85011%,15.74382% 51.61336%,15.65747% 50.4586%,15.56066% 49.3934%,15.45414% 48.42527%,15.33866% 47.56176%,15.21499% 46.81042%,15.08387% 46.17877%,14.94605% 45.67437%,14.8023% 45.30475%,14.65337% 45.07744%,14.5% 45%,14.34663% 45.07744%,14.1977% 45.30475%,14.05395% 45.67437%,13.91613% 46.17878%,13.78501% 46.81042%,13.66134% 47.56177%,13.54586% 48.42528%,13.43934% 49.3934%,13.34253% 50.45861%,13.25618% 51.61336%,13.18104% 52.85012%,13.11788% 54.16133%,13.06744% 55.53946%,13.03048% 56.97698%,13.00775% 58.46634%,13% 60%,13.00774% 61.53366%,13.03047% 63.02302%,13.06743% 64.46054%,13.11788% 65.83867%,13.18104% 67.14989%,13.25617% 68.38665%,13.34253% 69.54139%,13.43934% 70.6066%,13.54586% 71.57473%,13.66133% 72.43824%,13.78501% 73.18958%,13.91613% 73.82122%,14.05394% 74.32563%,14.1977% 74.69523%,14.34663% 74.92253%);
}
66.67% {
	clip-path:polygon(26.5% 75%,26.65336% 74.92255%,26.8023% 74.69525%,26.94605% 74.32565%,27.08387% 73.82124%,27.21499% 73.1896%,27.33866% 72.43825%,27.45414% 71.57475%,27.56066% 70.60662%,27.65747% 69.54142%,27.74382% 68.38666%,27.81896% 67.14991%,27.88212% 65.83869%,27.93256% 64.46056%,27.96952% 63.02304%,27.99225% 61.53368%,28% 60%,27.99225% 58.46634%,27.96952% 56.97698%,27.93256% 55.53946%,27.88212% 54.16132%,27.81896% 52.85011%,27.74382% 51.61336%,27.65747% 50.4586%,27.56066% 49.3934%,27.45414% 48.42527%,27.33866% 47.56176%,27.21499% 46.81042%,27.08387% 46.17877%,26.94605% 45.67437%,26.8023% 45.30475%,26.65336% 45.07744%,26.5% 45%,26.34663% 45.07744%,26.1977% 45.30475%,26.05394% 45.67437%,25.91613% 46.17878%,25.78501% 46.81042%,25.66133% 47.56177%,25.54586% 48.42528%,25.43934% 49.3934%,25.34252% 50.45861%,25.25617% 51.61336%,25.18104% 52.85012%,25.11788% 54.16133%,25.06743% 55.53946%,25.03047% 56.97698%,25.00774% 58.46634%,25% 60%,25.00774% 61.53366%,25.03047% 63.02302%,25.06743% 64.46054%,25.11788% 65.83867%,25.18104% 67.14989%,25.25617% 68.38665%,25.34252% 69.54139%,25.43934% 70.6066%,25.54586% 71.57473%,25.66133% 72.43824%,25.78501% 73.18958%,25.91613% 73.82122%,26.05394% 74.32563%,26.1977% 74.69523%,26.34663% 74.92253%);
}
100% {
	clip-path:polygon(35.07765% 95%,36.2561% 95.005%,37.43454% 95%,37.435% 88.04474%,37.43454% 80.73058%,36.08461% 80.735%,34.73468% 80.73058%,35.006% 76.95003%,35.35765% 73.42469%,35.73132% 70.28679%,36.06869% 67.66858%,36.38419% 65.08219%,36.65302% 62.50857%,36.87659% 59.90292%,37.05632% 57.22046%,37.19364% 54.41639%,37.28997% 51.4459%,37.34672% 48.26421%,37.36533% 44.82651%,37.33338% 41.97248%,37.23536% 38.78674%,37.06803% 35.48882%,36.82812% 32.29826%,36.51239% 29.43456%,36.11756% 27.11726%,35.6404% 25.5659%,35.07765% 25%,34.3811% 25.78319%,33.83116% 27.84798%,33.41126% 30.76715%,33.10485% 34.11353%,32.76622% 40.37908%,32.68279% 43.22706%,33.4093% 45.38694%,34.13581% 47.54683%,34.1744% 46.49038%,34.31497% 44.1662%,34.43513% 42.92487%,34.59475% 41.84201%,34.79846% 41.07608%,35.05093% 40.78556%,35.31947% 41.45641%,35.51266% 43.08917%,35.62939% 45.11415%,35.66854% 46.96166%,35.64011% 48.58472%,35.55843% 50.33767%,35.42892% 52.23002%,35.25701% 54.2713%,35.0481% 56.471%,34.80763% 58.83865%,34.541% 61.38376%,34.25365% 64.11585%,33.97762% 66.79837%,33.73712% 69.23437%,33.52973% 71.45581%,33.35298% 73.49466%,33.08163% 77.15255%,32.90352% 80.46381%,32.79907% 83.68428%,32.74869% 87.06974%,32.73282% 90.87601%,32.73187% 95%,34.01717% 95.005%);
}
}@keyframes Go2to1 {
	0% {
	clip-path:polygon(35.07765% 95%,36.2561% 95.005%,37.43454% 95%,37.435% 88.04474%,37.43454% 80.73058%,36.08461% 80.735%,34.73468% 80.73058%,35.006% 76.95003%,35.35765% 73.42469%,35.73132% 70.28679%,36.06869% 67.66858%,36.38419% 65.08219%,36.65302% 62.50857%,36.87659% 59.90292%,37.05632% 57.22046%,37.19364% 54.41639%,37.28997% 51.4459%,37.34672% 48.26421%,37.36533% 44.82651%,37.33338% 41.97248%,37.23536% 38.78674%,37.06803% 35.48882%,36.82812% 32.29826%,36.51239% 29.43456%,36.11756% 27.11726%,35.6404% 25.5659%,35.07765% 25%,34.3811% 25.78319%,33.83116% 27.84798%,33.41126% 30.76715%,33.10485% 34.11353%,32.76622% 40.37908%,32.68279% 43.22706%,33.4093% 45.38694%,34.13581% 47.54683%,34.1744% 46.49038%,34.31497% 44.1662%,34.43513% 42.92487%,34.59475% 41.84201%,34.79846% 41.07608%,35.05093% 40.78556%,35.31947% 41.45641%,35.51266% 43.08917%,35.62939% 45.11415%,35.66854% 46.96166%,35.64011% 48.58472%,35.55843% 50.33767%,35.42892% 52.23002%,35.25701% 54.2713%,35.0481% 56.471%,34.80763% 58.83865%,34.541% 61.38376%,34.25365% 64.11585%,33.97762% 66.79837%,33.73712% 69.23437%,33.52973% 71.45581%,33.35298% 73.49466%,33.08163% 77.15255%,32.90352% 80.46381%,32.79907% 83.68428%,32.74869% 87.06974%,32.73282% 90.87601%,32.73187% 95%,34.01717% 95.005%);
}
33.33% {
	clip-path:polygon(26.5% 75%,26.65336% 74.92255%,26.8023% 74.69525%,26.94605% 74.32565%,27.08387% 73.82124%,27.21499% 73.1896%,27.33866% 72.43825%,27.45414% 71.57475%,27.56066% 70.60662%,27.65747% 69.54142%,27.74382% 68.38666%,27.81896% 67.14991%,27.88212% 65.83869%,27.93256% 64.46056%,27.96952% 63.02304%,27.99225% 61.53368%,28% 60%,27.99225% 58.46634%,27.96952% 56.97698%,27.93256% 55.53946%,27.88212% 54.16132%,27.81896% 52.85011%,27.74382% 51.61336%,27.65747% 50.4586%,27.56066% 49.3934%,27.45414% 48.42527%,27.33866% 47.56176%,27.21499% 46.81042%,27.08387% 46.17877%,26.94605% 45.67437%,26.8023% 45.30475%,26.65336% 45.07744%,26.5% 45%,26.34663% 45.07744%,26.1977% 45.30475%,26.05394% 45.67437%,25.91613% 46.17878%,25.78501% 46.81042%,25.66133% 47.56177%,25.54586% 48.42528%,25.43934% 49.3934%,25.34252% 50.45861%,25.25617% 51.61336%,25.18104% 52.85012%,25.11788% 54.16133%,25.06743% 55.53946%,25.03047% 56.97698%,25.00774% 58.46634%,25% 60%,25.00774% 61.53366%,25.03047% 63.02302%,25.06743% 64.46054%,25.11788% 65.83867%,25.18104% 67.14989%,25.25617% 68.38665%,25.34252% 69.54139%,25.43934% 70.6066%,25.54586% 71.57473%,25.66133% 72.43824%,25.78501% 73.18958%,25.91613% 73.82122%,26.05394% 74.32563%,26.1977% 74.69523%,26.34663% 74.92253%);
}
66.67% {
	clip-path:polygon(14.5% 75%,14.65337% 74.92255%,14.8023% 74.69525%,14.94605% 74.32565%,15.08387% 73.82124%,15.21499% 73.1896%,15.33866% 72.43825%,15.45414% 71.57475%,15.56066% 70.60662%,15.65747% 69.54142%,15.74382% 68.38666%,15.81896% 67.14991%,15.88212% 65.83869%,15.93256% 64.46056%,15.96952% 63.02304%,15.99225% 61.53368%,16% 60%,15.99226% 58.46634%,15.96953% 56.97698%,15.93256% 55.53946%,15.88212% 54.16132%,15.81896% 52.85011%,15.74382% 51.61336%,15.65747% 50.4586%,15.56066% 49.3934%,15.45414% 48.42527%,15.33866% 47.56176%,15.21499% 46.81042%,15.08387% 46.17877%,14.94605% 45.67437%,14.8023% 45.30475%,14.65337% 45.07744%,14.5% 45%,14.34663% 45.07744%,14.1977% 45.30475%,14.05395% 45.67437%,13.91613% 46.17878%,13.78501% 46.81042%,13.66134% 47.56177%,13.54586% 48.42528%,13.43934% 49.3934%,13.34253% 50.45861%,13.25618% 51.61336%,13.18104% 52.85012%,13.11788% 54.16133%,13.06744% 55.53946%,13.03048% 56.97698%,13.00775% 58.46634%,13% 60%,13.00774% 61.53366%,13.03047% 63.02302%,13.06743% 64.46054%,13.11788% 65.83867%,13.18104% 67.14989%,13.25617% 68.38665%,13.34253% 69.54139%,13.43934% 70.6066%,13.54586% 71.57473%,13.66133% 72.43824%,13.78501% 73.18958%,13.91613% 73.82122%,14.05394% 74.32563%,14.1977% 74.69523%,14.34663% 74.92253%);
}
100% {
	clip-path:polygon(6.11525% 95%,6.32893% 95.005%,6.54262% 95%,6.75631% 95.005%,6.97% 95%,6.9705% 91.93676%,6.97% 88.87353%,6.9705% 85.8103%,6.97% 82.74707%,6.9705% 79.78413%,6.97% 76.82119%,6.9705% 73.85825%,6.97% 70.89531%,6.9705% 67.63515%,6.97% 64.375%,6.97025% 61.11485%,6.9705% 57.85469%,6.97% 54.89175%,6.9705% 51.92881%,6.97% 48.96587%,6.9705% 46.00293%,6.97% 42.9397%,6.9705% 39.87647%,6.97% 36.81323%,6.9705% 33.75%,6.97% 31.5625%,6.9705% 29.375%,6.97% 27.1875%,6.9705% 25%,6.62% 25.005%,6.27% 25%,5.92% 25.005%,5.57% 25%,5.2275% 26.15%,4.885% 27.3%,4.5425% 28.45%,4.2% 29.6%,4.3% 33.15%,4.4% 36.7%,4.5% 40.25%,4.6% 43.8%,4.77% 43.275%,4.94% 42.75%,5.11% 42.225%,5.28% 41.7%,5.2805% 45.03125%,5.28% 48.3625%,5.2805% 51.69375%,5.28% 55.025%,5.2805% 58.35625%,5.28% 61.6875%,5.2805% 65.01875%,5.28% 68.35%,5.2805% 71.68125%,5.28% 75.0125%,5.2805% 78.34375%,5.28% 81.675%,5.2805% 85.00625%,5.28% 88.3375%,5.2805% 91.66875%,5.28% 95%,5.48881% 95.005%,5.69762% 95%,5.90643% 95.005%);
}
}@keyframes Go2to3 {
	0% {
	clip-path:polygon(35.07765% 95%,36.2561% 95.005%,37.43454% 95%,37.435% 88.04474%,37.43454% 80.73058%,36.08461% 80.735%,34.73468% 80.73058%,35.006% 76.95003%,35.35765% 73.42469%,35.73132% 70.28679%,36.06869% 67.66858%,36.38419% 65.08219%,36.65302% 62.50857%,36.87659% 59.90292%,37.05632% 57.22046%,37.19364% 54.41639%,37.28997% 51.4459%,37.34672% 48.26421%,37.36533% 44.82651%,37.33338% 41.97248%,37.23536% 38.78674%,37.06803% 35.48882%,36.82812% 32.29826%,36.51239% 29.43456%,36.11756% 27.11726%,35.6404% 25.5659%,35.07765% 25%,34.3811% 25.78319%,33.83116% 27.84798%,33.41126% 30.76715%,33.10485% 34.11353%,32.76622% 40.37908%,32.68279% 43.22706%,33.4093% 45.38694%,34.13581% 47.54683%,34.1744% 46.49038%,34.31497% 44.1662%,34.43513% 42.92487%,34.59475% 41.84201%,34.79846% 41.07608%,35.05093% 40.78556%,35.31947% 41.45641%,35.51266% 43.08917%,35.62939% 45.11415%,35.66854% 46.96166%,35.64011% 48.58472%,35.55843% 50.33767%,35.42892% 52.23002%,35.25701% 54.2713%,35.0481% 56.471%,34.80763% 58.83865%,34.541% 61.38376%,34.25365% 64.11585%,33.97762% 66.79837%,33.73712% 69.23437%,33.52973% 71.45581%,33.35298% 73.49466%,33.08163% 77.15255%,32.90352% 80.46381%,32.79907% 83.68428%,32.74869% 87.06974%,32.73282% 90.87601%,32.73187% 95%,34.01717% 95.005%);
}
33.33% {
	clip-path:polygon(43.5% 75%,43.65336% 74.92255%,43.8023% 74.69525%,43.94605% 74.32565%,44.08387% 73.82124%,44.21499% 73.1896%,44.33866% 72.43825%,44.45414% 71.57475%,44.56066% 70.60662%,44.65747% 69.54142%,44.74382% 68.38666%,44.81896% 67.14991%,44.88212% 65.83869%,44.93256% 64.46056%,44.96952% 63.02304%,44.99225% 61.53368%,45% 60%,44.99225% 58.46634%,44.96952% 56.97698%,44.93256% 55.53946%,44.88212% 54.16132%,44.81896% 52.85011%,44.74382% 51.61336%,44.65747% 50.4586%,44.56066% 49.3934%,44.45414% 48.42527%,44.33866% 47.56176%,44.21499% 46.81042%,44.08387% 46.17877%,43.94605% 45.67437%,43.8023% 45.30475%,43.65336% 45.07744%,43.5% 45%,43.34663% 45.07744%,43.1977% 45.30475%,43.05394% 45.67437%,42.91613% 46.17878%,42.78501% 46.81042%,42.66133% 47.56177%,42.54586% 48.42528%,42.43934% 49.3934%,42.34253% 50.45861%,42.25617% 51.61336%,42.18104% 52.85012%,42.11788% 54.16133%,42.06744% 55.53946%,42.03048% 56.97698%,42.00774% 58.46634%,42% 60%,42.00774% 61.53366%,42.03048% 63.02302%,42.06744% 64.46054%,42.11788% 65.83867%,42.18104% 67.14989%,42.25617% 68.38665%,42.34253% 69.54139%,42.43934% 70.6066%,42.54586% 71.57473%,42.66133% 72.43824%,42.78501% 73.18958%,42.91613% 73.82122%,43.05394% 74.32563%,43.1977% 74.69523%,43.34663% 74.92253%);
}
66.67% {
	clip-path:polygon(55.49999% 75%,55.65336% 74.92255%,55.8023% 74.69525%,55.94605% 74.32565%,56.08387% 73.82124%,56.21498% 73.1896%,56.33866% 72.43825%,56.45414% 71.57475%,56.56065% 70.60662%,56.65747% 69.54142%,56.74382% 68.38666%,56.81896% 67.14991%,56.88212% 65.83869%,56.93256% 64.46056%,56.96952% 63.02304%,56.99225% 61.53368%,56.99999% 60%,56.99225% 58.46634%,56.96952% 56.97698%,56.93256% 55.53946%,56.88212% 54.16132%,56.81896% 52.85011%,56.74382% 51.61336%,56.65747% 50.4586%,56.56065% 49.3934%,56.45414% 48.42527%,56.33866% 47.56176%,56.21498% 46.81042%,56.08387% 46.17877%,55.94605% 45.67437%,55.8023% 45.30475%,55.65336% 45.07744%,55.49999% 45%,55.34663% 45.07744%,55.1977% 45.30475%,55.05394% 45.67437%,54.91613% 46.17878%,54.785% 46.81042%,54.66133% 47.56177%,54.54586% 48.42528%,54.43933% 49.3934%,54.34253% 50.45861%,54.25617% 51.61336%,54.18104% 52.85012%,54.11787% 54.16133%,54.06744% 55.53946%,54.03048% 56.97698%,54.00774% 58.46634%,54% 60%,54.00774% 61.53366%,54.03048% 63.02302%,54.06744% 64.46054%,54.11787% 65.83867%,54.18104% 67.14989%,54.25617% 68.38665%,54.34253% 69.54139%,54.43933% 70.6066%,54.54586% 71.57473%,54.66133% 72.43824%,54.785% 73.18958%,54.91613% 73.82122%,55.05394% 74.32563%,55.1977% 74.69523%,55.34663% 74.92253%);
}
100% {
	clip-path:polygon(63.97513% 94.96222%,64.33807% 94.75243%,64.66357% 94.15485%,64.9536% 93.21713%,65.21007% 91.98692%,65.63005% 88.83962%,65.939% 85.09418%,66.15238% 81.13179%,66.28566% 77.33371%,66.35428% 74.08111%,66.37372% 71.75523%,66.35595% 68.51652%,66.30576% 65.63653%,66.22778% 63.0946%,66.12663% 60.87006%,65.87337% 57.29048%,65.58304% 54.73246%,65.03946% 52.01985%,64.79238% 51.40954%,65.4158% 45.46985%,66.03923% 39.53016%,66.03963% 32.26508%,66.03923% 25%,64.99609% 25.005%,63.95297% 25%,62.90984% 25.005%,61.86671% 25%,61.86713% 32.31417%,61.86671% 39.62833%,62.99083% 39.635%,64.11496% 39.62833%,63.50135% 45.96073%,62.88775% 52.29313%,62.88813% 58.7237%,62.88775% 65.15428%,63.39581% 65.07498%,63.90388% 64.99568%,64.01674% 65.19158%,64.26767% 66.10303%,64.40382% 66.97885%,64.52519% 68.21568%,64.61534% 69.87423%,64.65783% 72.01521%,64.62305% 74.61534%,64.49704% 77.04904%,64.28893% 78.85069%,64.00787% 79.55471%,63.73745% 79.26498%,63.51993% 78.50117%,63.35012% 77.4213%,63.22283% 76.18339%,63.07505% 73.8656%,63.03502% 72.81206%,62.67177% 73.89201%,62.30851% 74.97195%,61.94526% 76.0519%,61.582% 77.13184%,61.65085% 79.91783%,61.96505% 86.04703%,62.26458% 89.32058%,62.68599% 92.17622%,62.9487% 93.31674%,63.24945% 94.19607%,63.59075% 94.76197%);
}
}@keyframes Go3to2 {
	0% {
	clip-path:polygon(63.97513% 94.96222%,64.33807% 94.75243%,64.66357% 94.15485%,64.9536% 93.21713%,65.21007% 91.98692%,65.63005% 88.83962%,65.939% 85.09418%,66.15238% 81.13179%,66.28566% 77.33371%,66.35428% 74.08111%,66.37372% 71.75523%,66.35595% 68.51652%,66.30576% 65.63653%,66.22778% 63.0946%,66.12663% 60.87006%,65.87337% 57.29048%,65.58304% 54.73246%,65.03946% 52.01985%,64.79238% 51.40954%,65.4158% 45.46985%,66.03923% 39.53016%,66.03963% 32.26508%,66.03923% 25%,64.99609% 25.005%,63.95297% 25%,62.90984% 25.005%,61.86671% 25%,61.86713% 32.31417%,61.86671% 39.62833%,62.99083% 39.635%,64.11496% 39.62833%,63.50135% 45.96073%,62.88775% 52.29313%,62.88813% 58.7237%,62.88775% 65.15428%,63.39581% 65.07498%,63.90388% 64.99568%,64.01674% 65.19158%,64.26767% 66.10303%,64.40382% 66.97885%,64.52519% 68.21568%,64.61534% 69.87423%,64.65783% 72.01521%,64.62305% 74.61534%,64.49704% 77.04904%,64.28893% 78.85069%,64.00787% 79.55471%,63.73745% 79.26498%,63.51993% 78.50117%,63.35012% 77.4213%,63.22283% 76.18339%,63.07505% 73.8656%,63.03502% 72.81206%,62.67177% 73.89201%,62.30851% 74.97195%,61.94526% 76.0519%,61.582% 77.13184%,61.65085% 79.91783%,61.96505% 86.04703%,62.26458% 89.32058%,62.68599% 92.17622%,62.9487% 93.31674%,63.24945% 94.19607%,63.59075% 94.76197%);
}
33.33% {
	clip-path:polygon(55.49999% 75%,55.65336% 74.92255%,55.8023% 74.69525%,55.94605% 74.32565%,56.08387% 73.82124%,56.21498% 73.1896%,56.33866% 72.43825%,56.45414% 71.57475%,56.56065% 70.60662%,56.65747% 69.54142%,56.74382% 68.38666%,56.81896% 67.14991%,56.88212% 65.83869%,56.93256% 64.46056%,56.96952% 63.02304%,56.99225% 61.53368%,56.99999% 60%,56.99225% 58.46634%,56.96952% 56.97698%,56.93256% 55.53946%,56.88212% 54.16132%,56.81896% 52.85011%,56.74382% 51.61336%,56.65747% 50.4586%,56.56065% 49.3934%,56.45414% 48.42527%,56.33866% 47.56176%,56.21498% 46.81042%,56.08387% 46.17877%,55.94605% 45.67437%,55.8023% 45.30475%,55.65336% 45.07744%,55.49999% 45%,55.34663% 45.07744%,55.1977% 45.30475%,55.05394% 45.67437%,54.91613% 46.17878%,54.785% 46.81042%,54.66133% 47.56177%,54.54586% 48.42528%,54.43933% 49.3934%,54.34253% 50.45861%,54.25617% 51.61336%,54.18104% 52.85012%,54.11787% 54.16133%,54.06744% 55.53946%,54.03048% 56.97698%,54.00774% 58.46634%,54% 60%,54.00774% 61.53366%,54.03048% 63.02302%,54.06744% 64.46054%,54.11787% 65.83867%,54.18104% 67.14989%,54.25617% 68.38665%,54.34253% 69.54139%,54.43933% 70.6066%,54.54586% 71.57473%,54.66133% 72.43824%,54.785% 73.18958%,54.91613% 73.82122%,55.05394% 74.32563%,55.1977% 74.69523%,55.34663% 74.92253%);
}
66.67% {
	clip-path:polygon(43.5% 75%,43.65336% 74.92255%,43.8023% 74.69525%,43.94605% 74.32565%,44.08387% 73.82124%,44.21499% 73.1896%,44.33866% 72.43825%,44.45414% 71.57475%,44.56066% 70.60662%,44.65747% 69.54142%,44.74382% 68.38666%,44.81896% 67.14991%,44.88212% 65.83869%,44.93256% 64.46056%,44.96952% 63.02304%,44.99225% 61.53368%,45% 60%,44.99225% 58.46634%,44.96952% 56.97698%,44.93256% 55.53946%,44.88212% 54.16132%,44.81896% 52.85011%,44.74382% 51.61336%,44.65747% 50.4586%,44.56066% 49.3934%,44.45414% 48.42527%,44.33866% 47.56176%,44.21499% 46.81042%,44.08387% 46.17877%,43.94605% 45.67437%,43.8023% 45.30475%,43.65336% 45.07744%,43.5% 45%,43.34663% 45.07744%,43.1977% 45.30475%,43.05394% 45.67437%,42.91613% 46.17878%,42.78501% 46.81042%,42.66133% 47.56177%,42.54586% 48.42528%,42.43934% 49.3934%,42.34253% 50.45861%,42.25617% 51.61336%,42.18104% 52.85012%,42.11788% 54.16133%,42.06744% 55.53946%,42.03048% 56.97698%,42.00774% 58.46634%,42% 60%,42.00774% 61.53366%,42.03048% 63.02302%,42.06744% 64.46054%,42.11788% 65.83867%,42.18104% 67.14989%,42.25617% 68.38665%,42.34253% 69.54139%,42.43934% 70.6066%,42.54586% 71.57473%,42.66133% 72.43824%,42.78501% 73.18958%,42.91613% 73.82122%,43.05394% 74.32563%,43.1977% 74.69523%,43.34663% 74.92253%);
}
100% {
	clip-path:polygon(35.07765% 95%,36.2561% 95.005%,37.43454% 95%,37.435% 88.04474%,37.43454% 80.73058%,36.08461% 80.735%,34.73468% 80.73058%,35.006% 76.95003%,35.35765% 73.42469%,35.73132% 70.28679%,36.06869% 67.66858%,36.38419% 65.08219%,36.65302% 62.50857%,36.87659% 59.90292%,37.05632% 57.22046%,37.19364% 54.41639%,37.28997% 51.4459%,37.34672% 48.26421%,37.36533% 44.82651%,37.33338% 41.97248%,37.23536% 38.78674%,37.06803% 35.48882%,36.82812% 32.29826%,36.51239% 29.43456%,36.11756% 27.11726%,35.6404% 25.5659%,35.07765% 25%,34.3811% 25.78319%,33.83116% 27.84798%,33.41126% 30.76715%,33.10485% 34.11353%,32.76622% 40.37908%,32.68279% 43.22706%,33.4093% 45.38694%,34.13581% 47.54683%,34.1744% 46.49038%,34.31497% 44.1662%,34.43513% 42.92487%,34.59475% 41.84201%,34.79846% 41.07608%,35.05093% 40.78556%,35.31947% 41.45641%,35.51266% 43.08917%,35.62939% 45.11415%,35.66854% 46.96166%,35.64011% 48.58472%,35.55843% 50.33767%,35.42892% 52.23002%,35.25701% 54.2713%,35.0481% 56.471%,34.80763% 58.83865%,34.541% 61.38376%,34.25365% 64.11585%,33.97762% 66.79837%,33.73712% 69.23437%,33.52973% 71.45581%,33.35298% 73.49466%,33.08163% 77.15255%,32.90352% 80.46381%,32.79907% 83.68428%,32.74869% 87.06974%,32.73282% 90.87601%,32.73187% 95%,34.01717% 95.005%);
}
}@keyframes Go3to4 {
	0% {
	clip-path:polygon(63.975% 94.96222%,64.33794% 94.75243%,64.66344% 94.15485%,64.95347% 93.21713%,65.20994% 91.98692%,65.62993% 88.83962%,65.93887% 85.09418%,66.15225% 81.13179%,66.28553% 77.33371%,66.35415% 74.08111%,66.37359% 71.75523%,66.35582% 68.51652%,66.30563% 65.63653%,66.22765% 63.0946%,66.1265% 60.87006%,65.87324% 57.29048%,65.58291% 54.73246%,65.03933% 52.01985%,64.79225% 51.40954%,65.41567% 45.46985%,66.0391% 39.53015%,66.0395% 32.26508%,66.0391% 25%,64.99596% 25.005%,63.95284% 25%,62.90971% 25.005%,61.86659% 25%,61.867% 32.31416%,61.86659% 39.62833%,62.9907% 39.635%,64.11483% 39.62833%,63.50122% 45.96073%,62.88762% 52.29313%,62.888% 58.7237%,62.88762% 65.15428%,63.39569% 65.07498%,63.90375% 64.99568%,64.01661% 65.19158%,64.26754% 66.10303%,64.40369% 66.97885%,64.52506% 68.21568%,64.61521% 69.87423%,64.6577% 72.01521%,64.62292% 74.61534%,64.49691% 77.04904%,64.2888% 78.85069%,64.00774% 79.55471%,63.73732% 79.26498%,63.5198% 78.50117%,63.34999% 77.4213%,63.2227% 76.18339%,63.07491% 73.8656%,63.03489% 72.81206%,62.67164% 73.89201%,62.30838% 74.97195%,61.94512% 76.0519%,61.58187% 77.13184%,61.65073% 79.91783%,61.96491% 86.04703%,62.26445% 89.32058%,62.68586% 92.17622%,62.94857% 93.31674%,63.24932% 94.19607%,63.59062% 94.76197%);
}
33.33% {
	clip-path:polygon(72.49999% 75%,72.65336% 74.92255%,72.8023% 74.69525%,72.94605% 74.32565%,73.08387% 73.82124%,73.21498% 73.1896%,73.33866% 72.43825%,73.45413% 71.57475%,73.56065% 70.60662%,73.65747% 69.54142%,73.74382% 68.38666%,73.81896% 67.14991%,73.88212% 65.83869%,73.93256% 64.46056%,73.96952% 63.02304%,73.99225% 61.53368%,73.99999% 60%,73.99225% 58.46634%,73.96952% 56.97698%,73.93256% 55.53946%,73.88212% 54.16132%,73.81896% 52.85011%,73.74382% 51.61336%,73.65747% 50.4586%,73.56065% 49.3934%,73.45413% 48.42527%,73.33866% 47.56176%,73.21498% 46.81042%,73.08387% 46.17877%,72.94605% 45.67437%,72.8023% 45.30475%,72.65336% 45.07744%,72.49999% 45%,72.34663% 45.07744%,72.19769% 45.30475%,72.05394% 45.67437%,71.91613% 46.17878%,71.785% 46.81042%,71.66133% 47.56177%,71.54586% 48.42528%,71.43933% 49.3934%,71.34252% 50.45861%,71.25617% 51.61336%,71.18104% 52.85012%,71.11787% 54.16133%,71.06744% 55.53946%,71.03047% 56.97698%,71.00774% 58.46634%,71% 60%,71.00774% 61.53366%,71.03047% 63.02302%,71.06744% 64.46054%,71.11787% 65.83867%,71.18104% 67.14989%,71.25617% 68.38665%,71.34252% 69.54139%,71.43933% 70.6066%,71.54586% 71.57473%,71.66133% 72.43824%,71.785% 73.18958%,71.91613% 73.82122%,72.05394% 74.32563%,72.19769% 74.69523%,72.34663% 74.92253%);
}
66.67% {
	clip-path:polygon(83.49999% 75%,83.65336% 74.92255%,83.8023% 74.69525%,83.94605% 74.32565%,84.08387% 73.82124%,84.21498% 73.1896%,84.33866% 72.43825%,84.45413% 71.57475%,84.56065% 70.60662%,84.65747% 69.54142%,84.74382% 68.38666%,84.81896% 67.14991%,84.88212% 65.83869%,84.93256% 64.46056%,84.96952% 63.02304%,84.99225% 61.53368%,84.99999% 60%,84.99225% 58.46634%,84.96952% 56.97698%,84.93256% 55.53946%,84.88212% 54.16132%,84.81896% 52.85011%,84.74382% 51.61336%,84.65747% 50.4586%,84.56065% 49.3934%,84.45413% 48.42527%,84.33866% 47.56176%,84.21498% 46.81042%,84.08387% 46.17877%,83.94605% 45.67437%,83.8023% 45.30475%,83.65336% 45.07744%,83.49999% 45%,83.34663% 45.07744%,83.19769% 45.30475%,83.05394% 45.67437%,82.91613% 46.17878%,82.785% 46.81042%,82.66133% 47.56177%,82.54586% 48.42528%,82.43933% 49.3934%,82.34252% 50.45861%,82.25617% 51.61336%,82.18104% 52.85012%,82.11787% 54.16133%,82.06744% 55.53946%,82.03047% 56.97698%,82.00774% 58.46634%,82% 60%,82.00774% 61.53366%,82.03047% 63.02302%,82.06744% 64.46054%,82.11787% 65.83867%,82.18104% 67.14989%,82.25617% 68.38665%,82.34252% 69.54139%,82.43933% 70.6066%,82.54586% 71.57473%,82.66133% 72.43824%,82.785% 73.18958%,82.91613% 73.82122%,83.05394% 74.32563%,83.19769% 74.69523%,83.34663% 74.92253%);
}
100% {
	clip-path:polygon(92.10376% 95%,92.52125% 95.005%,92.93876% 95%,93.35626% 95.005%,93.77375% 95%,93.7745% 91.1%,93.77375% 87.2%,93.7745% 83.3%,93.77375% 79.4%,93.96876% 79.405%,94.16375% 79.4%,94.35876% 79.405%,94.55375% 79.4%,94.5545% 75.8%,94.55375% 72.2%,94.5545% 68.6%,94.55375% 65%,94.35876% 65.005%,94.16375% 65%,93.96876% 65.005%,93.77375% 65%,93.7745% 55%,93.77375% 45%,93.7745% 35%,93.77375% 25%,93.27125% 25.005%,92.76875% 25%,92.26626% 25.005%,91.76376% 25%,91.84875% 29.575%,91.93376% 34.15%,92.01875% 38.725%,92.10376% 43.3%,92.1045% 48.725%,92.10376% 54.15%,92.1045% 59.575%,92.10376% 65%,91.77375% 65.005%,91.44375% 65%,91.11375% 65.005%,90.78375% 65%,91.11375% 59.575%,91.44375% 54.15%,91.77375% 48.725%,92.10376% 43.3%,92.01875% 38.725%,91.93376% 34.15%,91.84875% 29.575%,91.76376% 25%,91.08375% 35.575%,90.40376% 46.15%,89.72375% 56.725%,89.04376% 67.3%,89.0445% 70.325%,89.04376% 73.35%,89.0445% 76.375%,89.04376% 79.4%,89.80876% 79.405%,90.57376% 79.4%,91.33876% 79.405%,92.10376% 79.4%,92.1045% 83.3%,92.10376% 87.2%,92.1045% 91.1%);
}
}@keyframes Go4to3 {
	0% {
	clip-path:polygon(92.10376% 95%,92.52125% 95.005%,92.93876% 95%,93.35626% 95.005%,93.77375% 95%,93.7745% 91.1%,93.77375% 87.2%,93.7745% 83.3%,93.77375% 79.4%,93.96876% 79.405%,94.16375% 79.4%,94.35876% 79.405%,94.55375% 79.4%,94.5545% 75.8%,94.55375% 72.2%,94.5545% 68.6%,94.55375% 65%,94.35876% 65.005%,94.16375% 65%,93.96876% 65.005%,93.77375% 65%,93.7745% 55%,93.77375% 45%,93.7745% 35%,93.77375% 25%,93.27125% 25.005%,92.76875% 25%,92.26626% 25.005%,91.76376% 25%,91.84875% 29.575%,91.93376% 34.15%,92.01875% 38.725%,92.10376% 43.3%,92.1045% 48.725%,92.10376% 54.15%,92.1045% 59.575%,92.10376% 65%,91.77375% 65.005%,91.44375% 65%,91.11375% 65.005%,90.78375% 65%,91.11375% 59.575%,91.44375% 54.15%,91.77375% 48.725%,92.10376% 43.3%,92.01875% 38.725%,91.93376% 34.15%,91.84875% 29.575%,91.76376% 25%,91.08375% 35.575%,90.40376% 46.15%,89.72375% 56.725%,89.04376% 67.3%,89.0445% 70.325%,89.04376% 73.35%,89.0445% 76.375%,89.04376% 79.4%,89.80876% 79.405%,90.57376% 79.4%,91.33876% 79.405%,92.10376% 79.4%,92.1045% 83.3%,92.10376% 87.2%,92.1045% 91.1%);
}
33.33% {
	clip-path:polygon(83.49999% 75%,83.65336% 74.92255%,83.8023% 74.69525%,83.94605% 74.32565%,84.08387% 73.82124%,84.21498% 73.1896%,84.33866% 72.43825%,84.45413% 71.57475%,84.56065% 70.60662%,84.65747% 69.54142%,84.74382% 68.38666%,84.81896% 67.14991%,84.88212% 65.83869%,84.93256% 64.46056%,84.96952% 63.02304%,84.99225% 61.53368%,84.99999% 60%,84.99225% 58.46634%,84.96952% 56.97698%,84.93256% 55.53946%,84.88212% 54.16132%,84.81896% 52.85011%,84.74382% 51.61336%,84.65747% 50.4586%,84.56065% 49.3934%,84.45413% 48.42527%,84.33866% 47.56176%,84.21498% 46.81042%,84.08387% 46.17877%,83.94605% 45.67437%,83.8023% 45.30475%,83.65336% 45.07744%,83.49999% 45%,83.34663% 45.07744%,83.19769% 45.30475%,83.05394% 45.67437%,82.91613% 46.17878%,82.785% 46.81042%,82.66133% 47.56177%,82.54586% 48.42528%,82.43933% 49.3934%,82.34252% 50.45861%,82.25617% 51.61336%,82.18104% 52.85012%,82.11787% 54.16133%,82.06744% 55.53946%,82.03047% 56.97698%,82.00774% 58.46634%,82% 60%,82.00774% 61.53366%,82.03047% 63.02302%,82.06744% 64.46054%,82.11787% 65.83867%,82.18104% 67.14989%,82.25617% 68.38665%,82.34252% 69.54139%,82.43933% 70.6066%,82.54586% 71.57473%,82.66133% 72.43824%,82.785% 73.18958%,82.91613% 73.82122%,83.05394% 74.32563%,83.19769% 74.69523%,83.34663% 74.92253%);
}
66.67% {
	clip-path:polygon(72.49999% 75%,72.65336% 74.92255%,72.8023% 74.69525%,72.94605% 74.32565%,73.08387% 73.82124%,73.21498% 73.1896%,73.33866% 72.43825%,73.45413% 71.57475%,73.56065% 70.60662%,73.65747% 69.54142%,73.74382% 68.38666%,73.81896% 67.14991%,73.88212% 65.83869%,73.93256% 64.46056%,73.96952% 63.02304%,73.99225% 61.53368%,73.99999% 60%,73.99225% 58.46634%,73.96952% 56.97698%,73.93256% 55.53946%,73.88212% 54.16132%,73.81896% 52.85011%,73.74382% 51.61336%,73.65747% 50.4586%,73.56065% 49.3934%,73.45413% 48.42527%,73.33866% 47.56176%,73.21498% 46.81042%,73.08387% 46.17877%,72.94605% 45.67437%,72.8023% 45.30475%,72.65336% 45.07744%,72.49999% 45%,72.34663% 45.07744%,72.19769% 45.30475%,72.05394% 45.67437%,71.91613% 46.17878%,71.785% 46.81042%,71.66133% 47.56177%,71.54586% 48.42528%,71.43933% 49.3934%,71.34252% 50.45861%,71.25617% 51.61336%,71.18104% 52.85012%,71.11787% 54.16133%,71.06744% 55.53946%,71.03047% 56.97698%,71.00774% 58.46634%,71% 60%,71.00774% 61.53366%,71.03047% 63.02302%,71.06744% 64.46054%,71.11787% 65.83867%,71.18104% 67.14989%,71.25617% 68.38665%,71.34252% 69.54139%,71.43933% 70.6066%,71.54586% 71.57473%,71.66133% 72.43824%,71.785% 73.18958%,71.91613% 73.82122%,72.05394% 74.32563%,72.19769% 74.69523%,72.34663% 74.92253%);
}
100% {
	clip-path:polygon(63.975% 94.96222%,64.33794% 94.75243%,64.66344% 94.15485%,64.95347% 93.21713%,65.20994% 91.98692%,65.62993% 88.83962%,65.93887% 85.09418%,66.15225% 81.13179%,66.28553% 77.33371%,66.35415% 74.08111%,66.37359% 71.75523%,66.35582% 68.51652%,66.30563% 65.63653%,66.22765% 63.0946%,66.1265% 60.87006%,65.87324% 57.29048%,65.58291% 54.73246%,65.03933% 52.01985%,64.79225% 51.40954%,65.41567% 45.46985%,66.0391% 39.53015%,66.0395% 32.26508%,66.0391% 25%,64.99596% 25.005%,63.95284% 25%,62.90971% 25.005%,61.86659% 25%,61.867% 32.31416%,61.86659% 39.62833%,62.9907% 39.635%,64.11483% 39.62833%,63.50122% 45.96073%,62.88762% 52.29313%,62.888% 58.7237%,62.88762% 65.15428%,63.39569% 65.07498%,63.90375% 64.99568%,64.01661% 65.19158%,64.26754% 66.10303%,64.40369% 66.97885%,64.52506% 68.21568%,64.61521% 69.87423%,64.6577% 72.01521%,64.62292% 74.61534%,64.49691% 77.04904%,64.2888% 78.85069%,64.00774% 79.55471%,63.73732% 79.26498%,63.5198% 78.50117%,63.34999% 77.4213%,63.2227% 76.18339%,63.07491% 73.8656%,63.03489% 72.81206%,62.67164% 73.89201%,62.30838% 74.97195%,61.94512% 76.0519%,61.58187% 77.13184%,61.65073% 79.91783%,61.96491% 86.04703%,62.26445% 89.32058%,62.68586% 92.17622%,62.94857% 93.31674%,63.24932% 94.19607%,63.59062% 94.76197%);
}
}

JavaScript

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