在网上看到一个很漂亮的css3哈士奇动画，我给换成了小程序版本，有喜欢的拿去

以下是uniapp版本，文末有代码片段导入链接

<template>
	<view class="husky" :style="[newstyle]">
		<view class="husky-mane">
			<view class="husky-coat"></view>
		</view>
		<view class="husky-body">
			<view class="husky-head">
				<view class="husky-ear">
					<view class="husky-ear_after"></view>
					<view class="husky-ear_before"></view>
				</view>
				<view class="husky-ear2">
				<view class="husky-ear">
					<view class="husky-ear_after"></view>
					<view class="husky-ear_before"></view>
				</view>
				</view>
				<view class="husky-head_before"></view>
				<view class="husky-face">
					<view class="husky-face_before"></view>
					<view class="husky-eye">
						<view class="husky-eye_before"></view>
					</view>
					<view class="husky-eye">
						<view class="husky-eye_before"></view>
					</view>
					<view class="husky-nose">
						<view class="husky-nose_after"></view>
						<view class="husky-nose_before"></view>
					</view>
					<view class="husky-mouth">
						<view class="husky-mouth_before"></view>
						<view class="husky-mouth_after"></view>
						<view class="husky-lips">
							<view class="husky-lips_before"></view>
							<view class="husky-lips_after"></view>
						</view>
						<view class="husky-tongue"></view>
					</view>
				</view>
			</view>
			<view class="husky-torso">
				<view class="husky-torso_before"></view>
				<view class="husky-torso_after"></view>
			</view>
		</view>
		<view class="husky-legs">
			<view class="husky-front-legs">
				<view class="husky-front-legs_before"></view>
				<view class="husky-leg">
					<view class="husky-leg_before"></view>
				</view>
				<view class="husky-leg">
					<view class="husky-leg_before"></view>
				</view>
			</view>
			<view class="husky-hind-leg">
				<view class="husky-hind-leg_before"></view>
			</view>
		</view>
		<view class="husky-tail">
			<view class="husky-tail">
				<view class="husky-tail">
					<view class="husky-tail">
						<view class="husky-tail">
							<view class="husky-tail">
								<view class="husky-tail"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			newstyle: {
				type: Object,
				default () {
					return {};
				},
			},
		},
		data() {
			return {};
		},
	};
</script>
<style lang="scss" scoped>
	@keyframes husky-head {
		0% {
			transform: rotate(0);
		}


		6.66667% {
			transform: rotate(0);
		}


		20% {
			transform: rotate(-14deg);
		}


		40% {
			transform: rotate(-7deg);
		}


		46.66667% {
			transform: rotate(-14deg);
		}


		60% {
			transform: rotate(-7deg);
		}


		73.33333% {
			transform: rotate(0);
		}


		80% {
			transform: rotate(0);
		}
	}


	@keyframes husky-mouth {
		0% {
			transform: translateX(0);
		}


		6.66667% {
			transform: translateX(0);
		}


		13.33333% {
			transform: translateX(35%);
		}


		20% {
			transform: translateX(35%);
		}


		26.66667% {
			transform: translateX(35%);
		}


		33.33333% {
			transform: translateX(0) translateY(-5%);
		}
	}


	@keyframes husky-nose {
		0% {
			transform: translate(0);
		}


		6.66667% {
			transform: translate(0);
		}


		13.33333% {
			transform: translateX(100%);
		}


		26.66667% {
			transform: translateX(100%);
		}


		33.33333% {
			transform: translateX(0) translateY(-15%);
		}
	}


	@keyframes husky-body {
		0% {
			transform: translate(0);
		}


		6.66667% {
			transform: translateY(3%);
		}


		13.33333% {
			transform: translate(0);
		}


		20% {
			transform: translate(0);
		}


		26.66667% {
			transform: translateY(2%);
		}


		33.33333% {
			transform: translateY(0);
		}
	}


	@keyframes husky-mane {
		0% {
			transform: translate(0);
		}


		6.66667% {
			transform: translateY(5%);
		}


		13.33333% {
			transform: translate(0);
		}


		20% {
			transform: translate(0);
		}


		26.66667% {
			transform: translateY(3%);
		}


		33.33333% {
			transform: translateY(0);
		}
	}


	@keyframes husky-face {
		0% {
			transform: translate(0);
		}


		6.66667% {
			transform: translate(0);
		}


		13.33333% {
			transform: translateX(15%);
		}


		20% {
			transform: translateX(15%) translateY(0);
		}


		26.66667% {
			transform: translateX(15%) translateY(0);
		}


		33.33333% {
			transform: translateX(0) translateY(-15%);
		}


		40% {
			transform: translateX(0) translateY(-15%);
		}


		46.66667% {
			transform: translateX(0) translateY(0);
		}
	}


	@keyframes husky-left-eye {
		2.66667% {
			transform: scaleY(1);
		}


		3.33333% {
			transform: scaleY(0.3);
		}


		4% {
			transform: scaleY(1);
		}


		6.66667% {
			transform: translateX(0);
		}


		9.33333% {
			transform: scaleY(1) translateX(75%);
		}


		10% {
			transform: scaleY(0.3) translateX(75%);
		}


		10.66667% {
			transform: scaleY(1) translateX(75%);
		}


		13.33333% {
			transform: translateX(150%);
		}


		22% {
			transform: scaleY(1) translateX(150%);
		}


		22.66667% {
			transform: scaleY(0.3) translateX(150%);
		}


		23.33333% {
			transform: scaleY(1) translateX(150%);
		}


		25.33333% {
			transform: scaleY(1) translateX(150%);
		}


		26% {
			transform: scaleY(0.3) translateX(150%);
		}


		26.66667% {
			transform: scaleY(1) translateX(150%);
		}


		33.33333% {
			transform: translateX(0) translateY(-170%);
		}


		36.0% {
			transform: scaleY(1) translateY(-170%);
		}


		36.66667% {
			transform: scaleY(0.3) translateY(-170%);
		}


		37.33333% {
			transform: scaleY(1) translateY(-170%);
		}


		38% {
			transform: scaleY(1) translateY(-170%);
		}


		38.66667% {
			transform: scaleY(0.3) translateY(-170%);
		}


		39.33333% {
			transform: scaleY(1) translateY(-170%);
		}


		53.33333% {
			transform: translateY(0);
		}


		65.33333% {
			transform: scaleY(1) translateY(0);
		}


		66% {
			transform: scaleY(0.3) translateY(0);
		}


		66.66667% {
			transform: scaleY(1) translateY(0);
		}


		70% {
			transform: scaleY(1) translateY(0);
		}


		70.66667% {
			transform: scaleY(0.3) translateY(0);
		}


		71.33333% {
			transform: scaleY(1) translateY(0);
		}
	}


	@keyframes husky-right-eye {
		2.66667% {
			transform: scaleY(1);
		}


		3.33333% {
			transform: scaleY(0.3);
		}


		4% {
			transform: scaleY(1);
		}


		6.66667% {
			transform: translateX(0);
		}


		9.33333% {
			transform: scaleY(1) translateX(75%);
		}


		10% {
			transform: scaleY(0.3) translateX(75%);
		}


		10.66667% {
			transform: scaleY(1) translateX(75%);
		}


		13.33333% {
			transform: translateX(150%);
		}


		22% {
			transform: scaleY(1) translateX(150%);
		}


		22.66667% {
			transform: scaleY(0.3) translateX(150%);
		}


		23.33333% {
			transform: scaleY(1) translateX(150%);
		}


		25.33333% {
			transform: scaleY(1) translateX(150%);
		}


		26% {
			transform: scaleY(0.3) translateX(150%);
		}


		26.66667% {
			transform: scaleY(1) translateX(150%);
		}


		33.33333% {
			transform: translateX(0) translateY(-170%);
		}


		36.0% {
			transform: scaleY(1) translateY(-170%);
		}


		36.66667% {
			transform: scaleY(0.3) translateY(-170%);
		}


		37.33333% {
			transform: scaleY(1) translateY(-170%);
		}


		38% {
			transform: scaleY(1) translateY(-170%);
		}


		38.66667% {
			transform: scaleY(0.3) translateY(-170%);
		}


		39.33333% {
			transform: scaleY(1) translateY(-170%);
		}


		53.33333% {
			transform: translateY(0);
		}


		65.33333% {
			transform: scaleY(1) translateY(0);
		}


		66% {
			transform: scaleY(0.3) translateY(0);
		}


		66.66667% {
			transform: scaleY(1) translateY(0);
		}


		70% {
			transform: scaleY(1) translateY(0);
		}


		70.66667% {
			transform: scaleY(0.3) translateY(0);
		}


		71.33333% {
			transform: scaleY(1) translateY(0);
		}
	}


	@keyframes husky-tongue {
		46.66667% {
			transform: translateY(0);
		}


		53.33333% {
			transform: translateY(100%) rotate(10deg);
		}


		73.33333% {
			transform: translateY(100%) rotate(10deg);
		}


		80% {
			transform: translateY(0);
		}
	}


	@keyframes husky-mouth-cover-left {
		40% {
			transform: rotate(0);
		}


		60% {
			transform: rotate(90deg);
		}


		73.33333% {
			transform: rotate(90deg);
		}


		86.66667% {
			transform: rotate(0);
		}
	}


	@keyframes husky-mouth-cover-right {
		40% {
			transform: rotate(0);
		}


		60% {
			transform: rotate(-90deg);
		}


		73.33333% {
			transform: rotate(-90deg);
		}


		86.66667% {
			transform: rotate(0);
		}
	}


	@keyframes husky-tail {
		6.66667% {
			transform: rotate(0);
		}


		10% {
			transform: rotate(30deg);
		}


		13.33333% {
			transform: rotate(0);
		}


		20% {
			transform: rotate(0);
		}


		26.66667% {
			transform: rotate(30deg);
		}


		46.66667% {
			transform: rotate(30deg);
		}


		48.33333% {
			transform: rotate(0);
		}


		50% {
			transform: rotate(28deg);
		}


		50.83333% {
			transform: rotate(0);
		}


		51.66667% {
			transform: rotate(28deg);
		}


		52.5% {
			transform: rotate(0);
		}


		53.33333% {
			transform: rotate(28deg);
		}


		54.16667% {
			transform: rotate(0);
		}


		55.0% {
			transform: rotate(28deg);
		}


		55.83333% {
			transform: rotate(0);
		}


		56.66667% {
			transform: rotate(28deg);
		}


		57.5% {
			transform: rotate(0);
		}


		58.33333% {
			transform: rotate(28deg);
		}


		59.16667% {
			transform: rotate(0);
		}


		60% {
			transform: rotate(28deg);
		}


		60.83333% {
			transform: rotate(0);
		}


		61.66667% {
			transform: rotate(28deg);
		}


		62.5% {
			transform: rotate(0);
		}


		63.33333% {
			transform: rotate(28deg);
		}


		64.16667% {
			transform: rotate(0);
		}


		65% {
			transform: rotate(28deg);
		}


		65.83333% {
			transform: rotate(0);
		}


		66.66667% {
			transform: rotate(28deg);
		}


		67.5% {
			transform: rotate(0);
		}


		68.33333% {
			transform: rotate(28deg);
		}


		69.16667% {
			transform: rotate(0);
		}


		70% {
			transform: rotate(28deg);
		}


		70.83333% {
			transform: rotate(0);
		}


		71.66667% {
			transform: rotate(28deg);
		}


		72.5% {
			transform: rotate(0);
		}
	}


	@keyframes husky-left-ear {
		0% {
			transform: rotate(6deg);
		}


		6.66667% {
			transform: rotate(6deg);
		}


		13.33333% {
			transform: rotate(15deg);
		}


		26.66667% {
			transform: rotate(15deg);
		}


		33.33333% {
			transform: rotate(30deg);
		}


		40% {
			transform: rotate(30deg);
		}


		46.66667% {
			transform: rotate(0deg);
		}


		53.33333% {
			transform: rotate(0deg);
		}


		60% {
			transform: rotate(15deg);
		}


		80% {
			transform: rotate(15deg);
		}


		93.33333% {
			transform: rotate(6deg);
		}


		100% {
			transform: rotateZ(6deg);
		}
	}


	@keyframes husky-right-ear {
		0% {
			transform: rotateZ(-16deg) rotateY(180deg);
		}


		6.66667% {
			transform: rotateZ(-16deg) rotateY(180deg);
		}


		13.33333% {
			transform: rotateZ(-19deg) rotateY(180deg);
		}


		26.66667% {
			transform: rotateZ(-19deg) rotateY(180deg);
		}


		33.33333% {
			transform: rotateZ(-30deg) rotateY(180deg);
		}


		36.66667% {
			transform: rotateZ(-19deg) rotateY(180deg);
		}


		37.33333% {
			transform: rotateZ(-30deg) rotateY(180deg);
		}


		38% {
			transform: rotateZ(-19deg) rotateY(180deg);
		}


		40% {
			transform: rotateZ(-19deg) rotateY(180deg);
		}


		40.66667% {
			transform: rotateZ(-30deg) rotateY(180deg);
		}


		41.33333% {
			transform: rotateZ(-19deg) rotateY(180deg);
		}


		46.66667% {
			transform: rotateZ(-9deg) rotateY(180deg);
		}


		53.33333% {
			transform: rotateZ(-9deg) rotateY(180deg);
		}


		60% {
			transform: rotateZ(-19deg) rotateY(180deg);
		}


		60.66667% {
			transform: rotateZ(-30deg) rotateY(180deg);
		}


		61.33333% {
			transform: rotateZ(-19deg) rotateY(180deg);
		}


		62.66667% {
			transform: rotateZ(-19deg) rotateY(180deg);
		}


		63.33333% {
			transform: rotateZ(-30deg) rotateY(180deg);
		}


		64% {
			transform: rotateZ(-19deg) rotateY(180deg);
		}


		80% {
			transform: rotateZ(-19deg) rotateY(180deg);
		}


		93.33333% {
			transform: rotateZ(-16deg) rotateY(180deg);
		}


		100% {
			transform: rotateZ(-16deg) rotateY(180deg);
		}
	}


	.husky {
		animation: husky-squiggly-anim 0.3s infinite;
		// height: 48vmin;
		// width: 67.2vmin;
		// position: fixed;
		// z-index: 200;
		// bottom: 0;
		// right: 0;
	}


	@media screen and (max-width: 400px) {
		.husky {
			animation: husky-none;
		}
	}


	.husky::before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		width: 70%;
		height: 0.4vmin;
		background: #B9C4D3;
		border-radius: 0.4vmin;
		top: 100%;
		left: 5%;
		z-index: 7;
	}


	.husky::after {
		content: '';
		box-sizing: border-box;
		position: absolute;
		width: 100vw;
		left: 50%;
		height: 3rem;
		top: calc(100% + 0.4vmin);
		z-index: 8;
		background: #dbe8f7;
		transform: translateX(-50%);
	}


	.husky-head {
		animation: husky-head 12s none infinite;
		position: absolute;
		height: 45%;
		width: 58%;
		left: 34%;
		top: 5%;
		transform-origin: bottom center;
	}


	.husky-head_before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		background: #383B44;
		border-top-left-radius: 50% 40%;
		border-top-right-radius: 50% 40%;
		border-bottom-right-radius: 10% 60%;
		height: 100%;
		width: 100%;
		z-index:5;
	}


	.husky-face {
		animation: husky-face 12s none infinite;
		position: absolute;
		width: 98%;
		height: 62%;
		top: 15%;
		left: 2%;
		z-index:5;
	}


	.husky-face_before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		z-index: 6;
		width: 94%;
		height: 70%;
		left: 3%;
		background-color: white;
		bottom: 5%;
		border-top-left-radius: 40% 50%;
		border-top-right-radius: 40% 50%;
		border-bottom-left-radius: 30% 50%;
		border-bottom-right-radius: 30% 40%;
	}


	.husky-eye {
		animation: husky-eyes 12s none infinite;
		position: absolute;
		width: 30%;
		height: 40%;
		background-color: white;
		right: 45%;
		border-top-left-radius: 55% 50%;
		border-top-right-radius: 45% 50%;
		z-index: 7;
	}


	.husky-eye_before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		animation: husky-left-eye 12s none infinite;
		height: 15%;
		width: 15%;
		border-radius: 100%;
		background: #5D8BC3;
		top: 45%;
		left: 45%;
		transform-origin: center center;
	}


	.husky-eye+.husky-eye {
		z-index: 6;
		right: initial;
		left: 48%;
		border-top-right-radius: 55% 50%;
		border-top-left-radius: 45% 50%;
	}


	.husky-nose {
		animation: husky-nose 12s none infinite;
		z-index: 7;
		position: absolute;
		width: 20%;
		height: 20%;
		top: 29%;
		left: 42%;
	}


	.husky-nose_after {
		content: '';
		box-sizing: border-box;
		position: absolute;
		background: #383B44;
		height: 100%;
		width: 100%;
		border-top-left-radius: 20% 20%;
		border-top-right-radius: 30% 20%;
		border-bottom-right-radius: 55% 80%;
		border-bottom-left-radius: 50% 80%;
		z-index: 5;
	}


	.husky-nose_before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		height: 100%;
		width: 200%;
		background: white;
		top: 50%;
		left: -50%;
		z-index: 4;
		border-radius: 50%;
	}


	.husky-ear {
		animation: husky-left-ear 12s both infinite;
		position: absolute;
		top: 3%;
		left: -10%;
		width: 48%;
		height: 30%;
		border-bottom-left-radius: 100% 90%;
		border-top-left-radius: 10%;
		transform-origin: 80% center;
		overflow: hidden;
		background: #383B44;
	}


	.husky-ear_before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		width: 70%;
		height: 55%;
		border: 2px solid #383B44;
		background: #DE6465;
		top: 20%;
		left: 15%;
		transform-origin: top left;
		transform: skewX(30deg) rotate(-5deg);
	}


	.husky-ear_after {
		content: '';
		box-sizing: border-box;
		position: absolute;
		width: 70%;
		height: 100%;
		border-top-left-radius: 100%;
		background: #383B44;
		left: 32%;
		transform-origin: top left;
		transform: rotate(-5deg);
	}
.husky-ear2 {
	position: absolute;
	left: 15%;
	top: 5%;
	width: 48%;
	height: 30%;
	
	.husky-ear {
		border-bottom-left-radius: 100% 90%;
		border-top-left-radius: 10%;
		animation: husky-right-ear 12s both infinite;
		// backface-visibility:hidden;
		position: absolute;
		background-color: #2c2f36;
		width: 100%;
		height: 100%;
		left: 15%;
		top: 5%;
		z-index: 4;
		transform-origin: right center;
		overflow: hidden;
	}
	
	.husky-ear_before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		width: 70%;
		height: 55%;
		border: 2px solid #383B44;
		top: 20%;
		left: 15%;
		transform-origin: top left;
		transform: skewX(30deg) rotate(-5deg);
		
		
		border-color: #2c2f36;
	}
	
	.husky-ear_after {
		content: '';
		box-sizing: border-box;
		position: absolute;
		width: 70%;
		height: 100%;
		border-top-left-radius: 100%;
		left: 32%;
		transform-origin: top left;
		transform: rotate(-5deg);
		
		background: #2c2f36;
	}
	
}
	


	.husky-mouth {
		z-index: 6;
		animation: husky-mouth 12s none infinite;
		position: absolute;
		width: 48%;
		height: 55%;
		bottom: -5%;
		left: 28%;
		overflow: hidden;
	}


	.husky-mouth_before,
	.husky-mouth_after {
		content: '';
		box-sizing: border-box;
		position: absolute;
		animation: husky-mouth-cover-left 12s none infinite;
		width: 28%;
		height: 100%;
		background: white;
		top: -50%;
		left: 0;
		z-index: 8;
		transform-origin: right top;
	}


	.husky-mouth_after {
		content: '';
		box-sizing: border-box;
		position: absolute;
		animation: husky-mouth-cover-right 12s none infinite;
		left: initial;
		right: 0;
		transform-origin: left top;
	}


	.husky-lips {
		z-index: 7;
		height: 35%;
		width: 100%;
		position: absolute;
	}


	.husky-lips_before,
	.husky-lips_after {
		content: '';
		box-sizing: border-box;
		position: absolute;
		background: white;
		width: calc(50% + 1.5px);
		border-color: #A3ADBB;
		border-width: 0.3vmin;
		border-style: solid;
		height: 100%;
		border-bottom-left-radius: 65% 100%;
		border-bottom-right-radius: 35% 50%;
		border-top-right-radius: 50%;
		border-right-color: transparent;
		border-top-color: transparent;
	}


	.husky-lips_after {
		content: '';
		box-sizing: border-box;
		position: absolute;
		transform: rotateY(180deg);
		left: initial;
		right: 0;
	}


	@supports (-moz-appearance: none) and (display: contents) {


		.husky-lips_before,
		.husky-lips_after {
			content: '';
			box-sizing: border-box;
			position: absolute;
			width: calc(50% + 4px);
		}
	}


	.husky-tongue {
		animation: husky-tongue 12s none infinite;
		position: absolute;
		height: 100%;
		width: 44%;
		background: #DE6465;
		left: 25%;
		bottom: 100%;
		z-index: 6;
		border-bottom-left-radius: 50% 20%;
		border-bottom-right-radius: 50% 20%;
	}


	.husky-body {
		animation: husky-body 12s none infinite;
		width: 45%;
		height: 100%;
		position: absolute;
		left: 25%;
	}


	.husky-torso {
		position: absolute;
		height: 55%;
		width: 100%;
		bottom: 0;
	}


	.husky-torso_before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		background: #383B44;
		height: 100%;
		width: 50%;
		transform: translateX(-20%) skewX(-30deg);
		transform-origin: left bottom;
		border-radius: 0 30% 0 60%;
	}


	.husky-torso_after {
		content: '';
		box-sizing: border-box;
		position: absolute;
		background: #383B44;
		height: 100%;
		width: 60%;
		top: 0;
		right: 0;
		border-radius: 10% 40% 60% 0;
	}


	.husky-mane {
		animation: husky-mane 12s none infinite;
		z-index: 7;
		position: absolute;
		width: 31.5%;
		height: 30%;
		top: 44%;
		left: 37%;
	}


	.husky-mane::before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		background: white;
		height: 40%;
		width: 100%;
		border-top-left-radius: 10% 50%;
		border-top-right-radius: 20% 100%;
		border-bottom-left-radius: 10% 50%;
	}


	.husky-mane::after {
		content: '';
		box-sizing: border-box;
		position: absolute;
		background: white;
		top: 25%;
		height: 76%;
		width: 30%;
		right: 23%;
		border-top-right-radius: 100% 80%;
		transform: rotate(47deg);
		transform-origin: bottom right;
	}


	.husky-coat {
		position: absolute;
		width: 50%;
		height: 50%;
		background: white;
		transform-origin: bottom right;
		left: 10%;
		top: 21%;
		transform: rotate(25deg) skewX(-30deg);
	}


	.husky-legs {
		background-color: #383B44;
		position: absolute;
		height: 30%;
		width: 42%;
		left: 23%;
		bottom: 0;
		border-top-left-radius: 20% 37%;
		border-bottom-left-radius: 10% 37%;
		border-top-right-radius: 50%;
		z-index: 6;
	}


	.husky-front-legs {
		position: absolute;
		width: 55%;
		height: 120%;
		bottom: 0;
		right: -12%;
	}


	.husky-front-legs_before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		width: 4%;
		height: 6%;
		background: transparent;
		bottom: 0;
		left: 47%;
		box-shadow: -1.3vmin 0 0 #A3ADBB, -2.8vmin 0 0 #A3ADBB, 1.3vmin 0 0 #383B44, 2.8vmin 0 0 #383B44;
		z-index: 7;
	}


	.husky-front-legs>.husky-leg {
		width: 51%;
		height: 100%;
		position: absolute;
		bottom: -1px;
		right: 50%;
		overflow: hidden;
	}


	.husky-front-legs>.husky-leg>.husky-leg_before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		background: #B9C4D3;
		height: 100%;
		width: 100%;
		transform: skewY(-30deg) skewX(10deg);
		transform-origin: top right;
	}


	.husky-front-legs>.husky-leg+.husky-leg {
		right: 0;
		transform: rotateY(180deg);
	}


	.husky-front-legs>.husky-leg+.husky-leg>.husky-leg_before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		background: #A3ADBB;
	}


	.husky-hind-leg {
		position: absolute;
		background: #A3ADBB;
		width: 35%;
		height: 25%;
		border-top-left-radius: 35% 100%;
		border-top-right-radius: 40% 100%;
		bottom: 0%;
		right: 45%;
	}


	.husky-hind-leg_before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		width: 6%;
		height: 20%;
		background: transparent;
		bottom: 0;
		left: 70%;
		box-shadow: -0.8vmin 0 0 #383B44, 0.8vmin 0 0 #383B44;
	}


	.husky-tail {
		position: absolute;
		width: 15%;
		height: 6%;
		bottom: 0;
		right: 72%;
		background: #2c2f36;
		z-index: 5;
	}


	.husky-tail>.husky-tail {
		animation: husky-tail 12s none infinite;
		height: 100%;
		width: 3.2vmin;
		right: 26%;
		transform-origin: center right;
		border-top-left-radius: 50% 50%;
		border-bottom-left-radius: 50% 50%;
		transform: rotate(26deg);
		transform: rotate(0deg);
	}


	.husky>.husky-tail {
		border-top-left-radius: 10% 50%;
		border-bottom-left-radius: 10% 50%;
	}


	.husky>.husky-tail>.husky-tail {
		right: 88%;
	}
</style>

代码片段里是微信原生版本

https://developers.weixin.qq.com/s/xulu3tmI7HED