<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    51rgb-css3动画13-CSS3画出多啦A梦插画

                    分享 :

                    网盘下载链接:

                    提取密码: u4qi
                    复制提取密码
                    51RGB在线教育,WEB前端开发直播体验课,CSS3画出多啦A梦插画!源码下载
                    • 详情
                      文件来源

                      官方发布

                      更新日期

                      2018-01-26

                      适用平台

                      All

                      系统位数

                      ALL

                      文件格式

                      zip

                      文件语言

                      中文

                      文件授权

                      免费

                      下载次数

                      256次

                      源码,可以直接复制使用!

                      <!DOCTYPE html>
                      <html lang="en">
                      <head>
                      	<meta charset="UTF-8">
                      	<title>机器猫</title>
                      	<style>
                      *{margin:0;padding: 0;}
                      .top
                      {
                      	width: 500px;
                      	height: 500px;
                      	background: #fff;
                      	margin: 100px auto;
                      }
                      .head
                      {
                      	width: 300px;
                      	height: 300px;
                      	border: 1px solid blue;
                      	border-radius: 150px;
                      	background: #008ce6;
                      	margin: 0 auto;
                      }
                      .face
                      {
                      	width: 250px;
                      	height: 250px;
                      	border: 1px solid blue;
                      	border-radius: 125px;
                      	background: #fff;
                      	margin: -242px auto ;
                      
                      }
                      
                      .eyes
                      {
                      	border-radius: 40px;
                          height: 62px;
                          left: 198px;
                         top: -32px;
                          width: 51px;
                      	background: #fff;
                      	border: 1px solid black;
                      	position: relative;
                      	transform:rotate(-20deg);
                      	-webkit-transform:rotate(-20deg);  
                                
                          -moz-transform:rotate(-20deg);     
                         
                      	
                      }
                      .eyes_1{
                      	 height: 20px;
                      	 width: 20px;
                      	 border-radius: 10px;
                      	 border: 1px solid #000000;
                      	 margin-left: 19px;
                      	 margin-top: 20px;
                      	 background:#000000;
                      }
                      .eye
                      {
                      	width: 51px;
                      	height: 62px;
                      	border-radius: 40px;
                      	background: #fff;
                      	border: 1px solid black;
                      	position: relative;
                      	top: -96px;
                      	left: 256px;
                      	transform:rotate(20deg);
                      	-webkit-transform:rotate(20deg);  
                                
                          -moz-transform:rotate(20deg);     
                      }
                      .eye_1 
                      {
                      	height: 20px;
                      	 width: 20px;
                      	 border-radius: 10px;
                      	 border: 1px solid #000000;
                      	 margin-left: 12px;
                      	 margin-top: 20px;
                      	 background:#000000;
                      }
                      
                      .nose
                      {
                      	width: 40px;
                      	height: 40px;
                      	border-radius: 20px;
                      	background:#f50000;
                      	border: 1px solid red;
                      	position: relative;
                      	top: -117px;
                      	left: 235px;
                      
                      }
                      .nose_1
                      {
                      	width: 10px;
                      	height: 10px;
                      	border: 1px solid #fff;
                      	background: #fff;
                      	border-radius: 5px;
                      	position: relative;
                      	top: -147px;
                      	left: 242px;
                      
                      }
                      .nose_2
                      {
                      	width: 2px;
                      	height: 130px;
                      	background: #000000;
                      	position: relative;
                      	top: -129px;
                      	left: 254px;
                      }
                      .mouse
                      {
                      	width: 200px;
                      	height: 200px;
                      	 border-bottom:3px solid #333; 
                           border-radius:200px; 
                          position:relative; 
                          top:-329px; 
                          left:150px; 
                      }
                      
                      .beard_left
                      {
                         
                         position: relative;
                         top: -443px;
                         left:107px;
                          transform:rotate(15deg);
                      	-webkit-transform:rotate(15deg);  
                                
                          -moz-transform:rotate(15deg); 
                      }
                      .beard_center
                      {
                      	position: relative;
                      	top: -413px;
                      	left: 107px;
                      }
                      .beard_right,.beard_center,.beard_left,.beard_left_1,.beard_right_1,.beard_center_1
                      {
                        width: 100px;
                         height: 2px;
                         background: #000000;
                      }
                      .beard_right
                      {
                      	position: relative;
                      	top: -382px;
                      	left: 116px;
                      	 transform:rotate(-15deg);
                      	-webkit-transform:rotate(-15deg);  
                                
                          -moz-transform:rotate(-15deg); 
                      }
                      .beard_left_1
                      {
                      	position: relative;
                      	top: -449px;
                      	left: 295px;
                      	 transform:rotate(-15deg);
                      	-webkit-transform:rotate(-15deg);  
                                
                          -moz-transform:rotate(-15deg); 
                      }
                      .beard_center_1
                      {
                      	position: relative;
                      	top: -421px;
                      	left: 293px;
                      }
                      .beard_right_1
                      {
                      	position: relative;
                      	top: -389px;
                      	left: 284px;
                      	 transform:rotate(15deg);
                      	-webkit-transform:rotate(15deg);  
                                
                          -moz-transform:rotate(15deg); 
                      }
                      
                      /*头部结束*/
                      .scarf
                      {
                      	
                      	border-radius: 10px;
                      	background: #f50000;
                      	height: 22px;
                          left: 158px;
                          position: relative;
                          top: -307px;
                          width: 182px;
                      }
                      .bell 
                      {
                      	width: 40px; 
                       height: 40px; 
                       _verflow: hidden; /*IE6 hack*/
                       border: 2px solid #000; 
                       border-radius: 50px; 
                       background: #f9f12a; 
                       background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100)); 
                       background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); 
                       background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); 
                       box-shadow: -5px 5px 10px rgba(0,0,0,0.25); 
                       position: relative; 
                       top: -328px; 
                       left: 230px; 
                      }
                       .bell_line { 
                       width: 36px; 
                       height: 4px; 
                       background: #f9f12a; 
                       border: 2px solid #333; 
                       border-radius: 3px 3px 0 0; 
                       position: relative; 
                       top: 10px; 
                       left: 0px;
                       } 
                       .bell_circle{ 
                       width:12px; 
                       height:10px; 
                       background:#000; 
                       border-radius:5px; 
                       position:relative; 
                       top:13px; 
                       left:14px; 
                       } 
                       .bell_under{ 
                       width: 3px; 
                       height:11px; 
                       background:#000; 
                       position:relative; 
                       left: 19px; 
                       top:13px; 
                      }
                      .boy_body
                      {
                      	width: 166px;
                      	height: 96px;
                      	background: #009eec;
                      	z-index: 9999;
                      	margin-top: -351px;
                      	margin-left: 165px;
                      	border-width:1px;
                              border-style:solid;
                      	-moz-border-right-colors:#000;
                      	-moz-border-left-colors:#000;
                      }
                      
                      .circle
                      {
                      	width: 30px;
                      	height: 20px;
                      	border-radius: 20px 20px 0 0;
                      	margin-left: 233px;
                      	
                      	margin-top: -17px;
                      	background: #fff;
                      	
                      }
                      .foot_left
                      {
                      	width: 90px;
                      	height: 15px;
                      	border-radius: 15px;
                          border: 1px solid #000;
                      	background: #fff;
                      	margin-left: 254px;
                      	margin-top: -5px;
                      }
                      .foot_right
                      {
                      	width: 90px;
                      	height: 15px;
                      	border-radius: 15px;
                          border: 1px solid #000;
                      	background: #fff;
                      	margin-left: 150px;
                      	margin-top: -17px;
                      }
                      .arm_left
                      {
                      	height: 30px;
                      	width: 80px;
                      	border-radius: 55px;
                          background:#009eec;
                           transform:rotate(-20deg);
                           -webkit-transform:rotate(-20deg);  
                           -moz-transform:rotate(-20deg); 
                           margin-top: -104px;
                           margin-left:102px;
                      }
                      .arm_right
                      {
                      	height: 30px;
                      	width: 80px;
                      	border-radius: 55px;
                          background:#009eec;
                           transform:rotate(20deg);
                           -webkit-transform:rotate(20deg);  
                           -moz-transform:rotate(20deg); 
                           margin-top: -30px;
                           margin-left:315px;
                      }
                      .boy 
                      {
                      	height: 70px;
                      	width:140px;
                      	border-radius: 0 0 70px 70px;
                      	border: 1px solid #000;
                      	background: #fff;
                      	z-index: 9999;
                      	margin-top: -39px;
                          margin-left: 177px;
                      }
                      .boy_1
                      {
                      	background: #fff none repeat scroll 0 0;
                          border: 1px solid #000;
                          border-radius: 0 0 40px 40px;
                          height: 40px;
                          z-index: 9999;
                          margin-left: 30px;
                          margin-top: 27px;
                          width: 80px;
                      }
                      .hand_left
                      {
                      	height: 40px;
                      	 width: 40px;
                      	 border: 1px solid #000;
                      	 border-radius: 20px;
                      	 background: #fff;
                      	 position: relative;
                      	 top: -57px;
                      	 left: 88px;
                      
                      }
                      .hand_right
                      {
                      	height: 40px;
                      	 width: 40px;
                      	 border: 1px solid #000;
                      	 border-radius: 20px;
                      	 background: #fff;
                      	 position: relative;
                      	 top: -95px;
                      	 left: 374px;
                      }
                      </style>
                      	type="text/css">
                      </head>
                      <body>
                      	<div class="top">
                      		 <div class="head"></div> 
                      		 <!-- 头部 -->
                      		<div class="face"></div>
                      		<!-- 脸 -->
                      		<div class="eyes">
                      			<!-- 左眼眶 -->
                      			<div class="eyes_1"></div>
                      			<!-- 右眼眶 -->
                      		</div>
                      		<div class="eye">
                      			<!-- 左眼睛 -->
                      			<div class="eye_1"></div>
                      			<!-- 右眼睛 -->
                      		</div>
                      		
                      	    <div class="nose"></div>
                      	    <!-- 鼻子 -->
                      	    <div class="nose_1"></div>
                      	    <!-- 鼻子上圈圈 -->
                      	    <div class="nose_2"></div>
                      	    <!-- 鼻子线 -->
                      		<div class="mouse"></div>
                      		<!-- 嘴巴 -->
                      		<div class="beard_left"></div>
                      		<!-- 左边上胡须 -->
                      		<div class="beard_center"></div>
                      		<!-- 左边中胡须 -->
                      		<div class="beard_right"></div>
                      		<!-- 左边下胡须 -->
                      		<div class="beard_left_1"></div>
                               <!-- 右边上胡须 -->
                      		<div class="beard_center_1"></div>
                      		<!-- 右边中胡须 -->
                      		<div class="beard_right_1"></div>
                      		<!-- 右边下胡须 -->
                      
                      	
                      	<!-- 头部结束 -->
                      			<div class="scarf"></div>
                      			<!-- 围脖 -->
                      		<div class="bell">
                      			<!-- 铃铛 -->
                      			<div class="bell_line"></div>
                      			<!-- 铃铛上线 -->
                      			<div class="bell_circle"></div>
                      			<!-- 铃铛黑点 -->
                      		<div class="bell_under"></div>
                      		<!-- 铃铛下线 -->
                      	<!-- 铃铛结束 -->
                      	</div>
                      	<div class="boy_body"></div>
                      	<!-- 身体 -->
                      	
                      	<div class="circle"></div>
                      	<!-- 脚中间圆圈 -->
                          <div class="foot_left"></div>
                          <!-- 左脚 -->
                          <div class="foot_right"></div>
                          <!-- 右脚 -->
                          <div class="arm_left"></div>
                          <!-- 左手臂 -->
                          <div class="arm_right"></div>
                          <!-- 右手臂 -->
                          <div class="boy">
                      		<!-- 身体白 -->
                      		<div class="boy_1"></div>
                      	    <!-- 肚兜 -->
                      	</div>
                      	<div class="hand_left"></div>
                      	<!-- 左手 -->
                      	<div class="hand_right"></div>
                      	<!-- 右手 -->
                      
                      </div>
                      	
                      </body>
                      </html>
                      
                    • 使用说明

                      本节课视频资源:

                      课程在线回放地址:http://www.gonooa.com/video/page-29/280.html

                      关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

                    • 相关下载
                    北京赛车玩法和赔率|官网_首页