div+css实现卡通动漫太空女性宇航员转头微笑动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现卡通动漫太空女性宇航员转头微笑动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
	width: 100%; height: 100vh;
	margin: 0;
}
.scene {
	position: relative;
	max-width: 100vw; max-height: 100vh;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin: auto;
	z-index: 1;
	background: radial-gradient(ellipse, rgb(222 133 82 / 30%), transparent 48%) -7vh 72vh / 110% 25% no-repeat, radial-gradient(ellipse, rgb(222 133 82 / 30%), transparent 48%) 83vh 52vh / 110% 25% no-repeat, radial-gradient(ellipse, rgb(222 133 82 / 30%), transparent 48%) -320% 30% / 110% 19% no-repeat, radial-gradient(ellipse at 30% 10%, #884f45, #ca845c 20%, transparent 70%) 0 -20% / 90% 49% no-repeat, radial-gradient(ellipse at 30% 40%, rgb(220 164 141 / 60%) 20%, transparent 48%) -20% -10% / 50% 69% no-repeat, linear-gradient(30deg, transparent, rgb(155 93 83 / 70%) 70%, rgb(210 152 133 / 70%)), linear-gradient(10deg, #51131f, #8b2b3c 40%, #72222c);
	--noise-3: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	--animation: 4.2s linear infinite;
}
.scene *, .scene::before, .scene::after, .scene *::before, .scene *::after {
	position: absolute;
	content: '';
	transform-origin: top left;
}
.scene::before {
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: radial-gradient(circle, rgb(255 147 7 / 100%), rgba(255 147 7 / 0) 60%) center 32% / 0% 0% no-repeat;
	mix-blend-mode: overlay;
	z-index: 1;
	animation: sceneShine var(--animation);
}
@keyframes sceneShine {
	100%  { background-position: center 72%;
					background-size: 150% 150%;
					opacity: 0.4; }
	76.0% { background-position: center 72%;
					background-size: 150% 150%;
					opacity: 0.4; }
	48.8% { background-position: center 32%;
					background-size: 20% 20%;
					opacity: 0; }
	00.0% { background-position: center 32%;
            background-size: 20% 20%;
            opacity: 0; }
}
.scene::after {
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: var(--noise-3) 0 / 20vh repeat;
	mix-blend-mode: overlay;
	z-index: 1;
}

.person {
	bottom: 0; left: 50%;
}
	.person::before {
		/* left shoulderpad */
		top: -43.9vh; left: 9vh;
		width: 17.3vh; height: 20vh;
		background: linear-gradient(45deg, #3d517e, #33446b);
		border-radius: 30% 70% 20% 20% / 17% 80% 20% 20%;
		z-index: -1;

		animation: leftShoulderpad var(--animation);
	}
	@keyframes leftShoulderpad {
		/* 86 - 74 */
		100%  { transform: translate(0vh, 0vh) rotate(-6deg); }
		86.0% { transform: translate(0vh, 0vh) rotate(-6deg); }
		/* 68 */
		79.1% { transform: translate(0vh, 0vh) rotate(-4deg); }
		/* 60 - 49 */
		69.8% { transform: translate(-3vh, -0.8vh) rotate(-4deg); }
		57.0% { transform: translate(-3vh, -0.8vh) rotate(-4deg); }
		/* 42 - 0 */
		48.8% { transform: translate(-3.1vh, 1.2vh) rotate(-4deg); }
		00.0% { transform: translate(-3.1vh, 1.2vh) rotate(-4deg); }
	}

.person__lefttarm {
	top: -21vh; left: -33vh;
	width: 16vh; height: 26vh;
	background: #e9d3b8;
	border-radius: 10vh 10vh 0 0;
	transform-origin: top center;

	animation: leftArm var(--animation);
}
@keyframes leftArm {
	/* 86 - 74 */
	100%  { transform: translate(0vh, 0vh) rotate(4deg); }
	86.0% { transform: translate(0vh, 0vh) rotate(4deg); }
	/* 68 */
	79.1% { transform: translate(0.9vh, -0.3vh) rotate(4deg); }
	/* 60 */
	69.8% { transform: translate(5.3vh, 0.3vh) rotate(6deg); }
	/* 58 */
	67.4% { transform: translate(6.1vh, 1.8vh) rotate(6deg); }
	/* 57 - 49 */
	66.3% { transform: translate(6.6vh, 2.2vh) rotate(7deg); }
	57.0% { transform: translate(6.6vh, 2.2vh) rotate(7deg); }
	/* 42 */
	48.8% { transform: translate(7.4vh, 2.7vh) rotate(8deg); }
	/* 34 */
	39.5% { transform: translate(10.5vh, 2.7vh) rotate(12deg); }
	/* 32 */
	37.2% { transform: translate(12.6vh, 2.7vh) rotate(14deg); }
	/* 29 - 10 */
	33.7% { transform: translate(12.9vh, 2.7vh) rotate(14deg); }
	11.6% { transform: translate(12.9vh, 2.7vh) rotate(14deg); }
	/* 3 */
	03.5% { transform: translate(11.6vh, 2.6vh) rotate(7deg); }
	/* 0 */
	00.0% { transform: translate(11.8vh, 2.6vh) rotate(7deg); }
}
	.person__lefttarm::before {
		top: -3.4vh; left: -1vh;
		width: 18.6vh; height: 26vh;
		background: radial-gradient(ellipse, #f6413f 32%, transparent calc(32% + 1px)) -36% 71% / 70% 97% no-repeat, linear-gradient(#33446b, #3c5180);
		border-radius: 60% 40% 40% 60% / 50% 50% 50% 50%;

		animation: leftArmBefore var(--animation);
	}
	@keyframes leftArmBefore {
		/* 86 - 68 */
		100%  { background-position: -36% 71%, 0 0;
						background-size: 70% 97%, 100% 100%;
						transform: translate(0vh, 0vh) scale(1, 1); }
		79.1% { background-position: -36% 71%, 0 0;
						background-size: 70% 97%, 100% 100%;
						transform: translate(0vh, 0vh) scale(1, 1); }
		/* 60 */
		69.8% { background-position: -29% 113%, 0 0;
						background-size: 82% 97%, 100% 100%;
						transform: translate(0vh, 0vh) scale(1.05, 0.98); }
		/* 58 */
		67.4% { background-position: -61% 113%, 0 0;
						background-size: 89% 97%, 100% 100%;
						transform: translate(0vh, 0vh) scale(1.06, 0.98); }
		/* 57 - 42 */
		66.3% { background-position: -61% 244%, 0 0;
						background-size: 90% 97%, 100% 100%;
						transform: translate(0vh, 0.1vh) scale(1.07, 0.97); }
		48.8% { background-position: -61% 244%, 0 0;
						background-size: 90% 97%, 100% 100%;
						transform: translate(0vh, 0.1vh) scale(1.07, 0.97); }
		/* 34 */
		39.5% { background-position: -111% 194%, 0 0;
						background-size: 97% 97%, 100% 100%;
						transform: translate(0vh, 0.1vh) scale(1.07, 0.97); }
		/* 32 -.........完整代码请登录后点击上方下载按钮下载查看