会变色的小鬼

最新推荐文章于 2024-01-05 09:42:33 发布

吃素的黑猫

最新推荐文章于 2024-01-05 09:42:33 发布

阅读量228

点赞数

分类专栏： web开发——作品文章标签： html css css3

本文链接：https://blog.csdn.net/qq_44645934/article/details/108148357

版权

web开发——作品专栏收录该内容

10 篇文章 0 订阅

订阅专栏

会变色的小鬼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>会变色的小鬼</title>
	</head>
	<body>
		 <div id="box">
		 	<div id="body">
		 		<div class="ears"></div>
		 		<div class="ears"></div>
		 		<div class="eyes left-eye"></div>
		 		<div class="eyes right-eye"></div>
		 		<div class="mouth"></div>
		 		<div id="foot">
			 		<div class="toenails"></div>
			 		<div class="toenails"></div>
			 		<div class="toenails"></div>
			 		<div class="toenails"></div>
		 	</div>
		 	</div>
		 </div>
	</body>
</html>

           *{
				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() 函数计算 <div> 元素的宽度:
			* 需要注意的是，运算符前后都需要保留一个空格
			* 必须，一个数学表达式，结果将采用运算后的返回值。
			*  */
			.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;
			}