Trguti 2021-06-23 08:46 采纳率: 50%
浏览 164
已采纳

css画这只熊猫 求代码!!!急

 

  • 写回答

2条回答 默认 最新

  • 有菜又爱玩呀~ 2021-06-23 08:56
    关注
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<style>
    		body {
    		  background-color: #e6cff6;
    		  text-align:center;  
    		  height: 100%; 
    		  margin: 0px;
    		}
    		#panda{  
    		  margin: 80px auto;
    		  position: relative;
    		  height:417px;
    		  width:417px;
    		}
    		#panda div{
    			position:absolute;
    		}
    		#panda div::before, #panda div::after {
    		  content:'';
    		  position:absolute;
    		  display:block;
    		}
    		.head{
    		  z-index:2;
    		  width:130px;
    		  height:95px;
    		  background-color: white;				
    		  border-radius: 80px 80px 60px 60px;
    		  border: 4px solid black;
    		  top:85px;
    		  left:128px;
    		}
    		/*nose*/
    		.face{
    		  z-index: 3;
    		  width: 12px;
    		  height: 6px;
    		  background-color: black;
    		  border-radius:100%;
    		  top:154px;
    		  left: 190px;
    		 }
    		 /*black part around eyes*/
    		 	 /*Left black part of eye*/
    		 .eyes::before{
    			z-index: 4;
    			display:block;
    			width: 30px;
    			height: 40px;
    			top: 115px;
    			left: 210px;
    			transform: rotate(-20deg);
    			background-color: black;
    			border-radius: 100% 100% 88% 88% /100% 100% 88% 88%;
    		 }
    			 /*Right black part of eye*/
    		 .eyes::after{
    			z-index: 4;
    			display:block;
    			width: 30px;
    			height: 40px;
    			top: 115px;
    			left: 154px;
    			transform: rotate(20deg);
    			background-color: black;
    			border-radius: 100% 100% 88% 88% /100% 100% 88% 88%;
    		 }
    		 /*eye balls*/
    		 .eye-balls{
    		  z-index: 5;
    		  width:10px;
    		  height:10px;
    		  background-color:white;
    		  box-shadow: 0 0 0 1px black, 54px 0 0 white, 54px 0 0 1px black;
    		  border-radius:100%;
    		  top: 125px;
    		  left: 164px;
    		}
    		/*eye shine*/
    		.eye-balls::after{
    		  z-index: 5;
    		  width:3px;
    		  height:3px;
    		  background-color:white;
    		  box-shadow: 0 0 0 1px white, 54px 0 0 white, 54px 0 0 1px white;
    		  border-radius:100%;
    		  top: 10px;
    		  left: 10px;
    		}
    		.body{
    		  z-index: 1;
    		  width: 90px;
    		  height: 80px;
    		  background-color: white;
    		  border-top-left-radius: 40%;
    			border-top-right-radius: 40%;
    			border-bottom-right-radius: 30%;
    			border-bottom-left-radius: 30%;
    		  border: 4px solid black;
    		  top:168px;
    		  left:148px;
    		}
    			/*right ear*/
    		.ears::before{
    		  width:50px;
    		  height:50px;
    		  background-color: black;
    		  border-radius: 100%;
    		  top:90px;
    		  left:228px;
    		}
    			/*left ear*/
    		.ears::after{
    		  width:50px;
    		  height:50px;
    		  background-color: black;
    		  border-radius: 100%;
    		  top:90px;
    		  left:117px;
    		  }
    		 /*beginning of paws*/
    		 	/*Bottom paws*/
    		.paws{
    		  width:26px;
    		  height:66px;
    		  background-color: black;
    		  border-radius:0 0 80px 80px;
    		  box-shadow: 50px 0 0 black;
    		  top:210px;
    		  left:158px;
    		}
    			/*Top Left paw*/
    		.paws::before {
    		  z-index: 2;
    		  width: 30px;
    		  height:34px;
    		  background-color: black;
    		  border-radius:80px 0px 80px 80px;
    		  left:-8px;
    		  top:-19px;
    		  transform: rotate(-80deg);
    		}
    			/*Top Right paw*/
    		.paws::after {
    		  z-index: 2;
    		  width: 30px;
    		  height:34px;
    		  background-color: black;
    		  border-radius:0px 80px 80px 80px;
    		  left:55px;
    		  top:-19px;
    		  transform: rotate(80deg);
    		}
    	</style>
    	<body>
    		<div id="panda">
    		  <div class="head"></div>
    		  <div class="face"></div>
    		  <div class="eyes"></div>
    		  <div class="eye-balls"></div>
    		  <div class="body"></div>
    		  <div class="paws"></div>
    		  <div class="ears"></div>
    		</div>
    	</body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 prism提示我reinstall prism 如何解决
  • ¥15 asp.core 权限控制怎么做,需要控制到每个方法
  • ¥20 while循环中OLED显示中断中的数据不正确
  • ¥15 这个视频里的stm32f4代码是怎么写的
  • ¥15 JNA调用DLL报堆栈溢出错误(0xC00000FD)
  • ¥15 请教SGeMs软件的使用
  • ¥15 自己用vb.net编写了一个dll文件,如何只给授权的用户使用这个dll文件进行打包编译,未授权用户不能进行打包编译操作?
  • ¥50 深度学习运行代码直接中断
  • ¥20 需要完整的共散射点成像代码
  • ¥15 编写vba代码实现数据录入工作