会变色的小鬼

会变色的小鬼

           *{
				margin: 0;
				padding: 0;
			}
			body{
				width: 100%;
				height:100vh;
				background: black;
			}
			#box{
				width: 200px;
				height: 300px;
				background: black;
				position: absolute;
				top: 100px;
				left:calc(50% - 100px);
				/*animation:设置动画效果*/
				animation: moving 5s linear infinite;
			}
			@keyframes moving{
				0%,50%,100%{
					transform: translateY(0px);
				}
				25%{
					transform: translateY(-15px);
				}
				75%{
					transform: translateY(15px);
				}
			}
			/*需要改变背景颜色的类*/
			#body,.ears,.mouth:before,.toenails{
				background:greenyellow;
			}
			#body{
				margin: 40px auto;
				margin-bottom: 0px;
				width: 80px;
				height: 90px;
				border-radius:50% 50% 0% 0% ;
				/*display: flex设置为弹性容器，所有子元素自动成为容器成员*/
				display: flex;
				animation: colors 5s linear infinite;
				/*filter: blur(1px);*/
			}
			/*设置滤镜效果
			 * filter: blur(1px);模糊度
			 * filter: hue-rotate(0deg);图像应用色相旋转
			 * 注意：先要给元素设置一个背景色，才能显示出滤镜hue-rotate()的效果;但是不能设置为black和white;
			 * */
			@keyframes colors{
				0%{
					filter: hue-rotate(0deg);
				}
				100%{
					filter: hue-rotate(360deg);
				}
			}
			.ears{
				width: 26px;
				height: 20px;
				border-radius: 50% 0% 0% 50%;
				position: absolute;
				top: 45px;
			}
			.ears:nth-child(1){
				left: -10px;
			}
			.ears:nth-child(2){
				transform: rotateY(180deg);
				left: 64px;
			}
			.eyes{
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background:black;
				position: absolute;
				top: 30px;
				animation: zoomIn 3s linear infinite;
				z-index: 1000;
			}
			/*width:calc(100% - 10px);
			* 使用 calc() 函数计算 
 元素的宽度:
			* 需要注意的是，运算符前后都需要保留一个空格
			* 必须，一个数学表达式，结果将采用运算后的返回值。
			*  */
			.left-eye{
				left:calc(30% - 10px);
			}
			.right-eye{
				left:calc(70% - 10px);
			}
			.mouth{
				width: 20px;
				height: 30px;
				border-radius:50% 45%;
				background:black;
				position: absolute;
                top: 45px;
                left:calc(50% - 10px);
				animation: zoomIn 3s linear infinite;
			}
			.mouth:before{
				content: " ";
				display: block;
				width: 20px;
				height: 15px;
				position: absolute;
			}
			@keyframes zoomIn{
				0%,100%{
					transform: scaleY(1);
				}
				50%{
					transform: scaleY(0.5);
				}
			}
			#foot{
				width: 80px;
				height: 30px;
				position: absolute;
				top: 78px;
				display: flex;
			}
			#foot .toenails{
				width: 20px;
				height: 20px;
				border-radius:50% ;
				/*z-index:number; 属性指定一个元素的堆叠顺序，*/
				z-index: -100;
			}