PROMULGATOR

    若选择靠近我、请久伴我

    上海市闵行区
    Html
    Css
    Js

    
                        


                        

                            


.wrapper {
	margin:50px 0 0 50px;
}
.doraemon {
	position:relative;
}
.doraemon .head {
	position:relative;
	width:320px;
	height:300px;
	border-radius:150px;
	background:#07bbee;
	background:-webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
	background:-moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
	background:-ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
	border:2px solid #555;
	box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
}
/*脸部*/
            .doraemon .face {
	position:relative;
	/*让所有脸部元素可自由定位*/
                 z-index:2;
	/*脸在头部背景上面*/
}
/*白色脸底*/
            	        .doraemon .face .white {
	width:265px;
	/*设置宽高*/
                 	            height:195px;
	border-radius:150px;
	position:absolute;
	/*进行绝对定位*/
                 	            top:75px;
	left:25px;
	background:#fff;
	/*此放射渐变也是使脸的左下角暗一些，看上去更真实*/
                 	            background:-webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
	background:-moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
	background:-ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
}
/*鼻子*/
            	         .doraemon .face .nose {
	width:30px;
	height:30px;
	border-radius:15px;
	background:#c93300;
	border:2px solid #000;
	position:absolute;
	top:110px;
	left:140px;
	z-index:3;
	/*鼻子在白色脸底下面*/
}
/*鼻子上的高光*/
            	        .doraemon .face .nose .light {
	width:10px;
	height:10px;
	border-radius:5px;
	box-shadow:19px 8px 5px #fff;
	/*通过阴影实现高光*/
}
/*鼻子下的线*/
            	         .doraemon .face .nose_line {
	width:3px;
	height:100px;
	background:#333;
	position:absolute;
	top:143px;
	left:155px;
	z-index:3;
}
/*嘴巴*/
            	         .doraemon .face .mouth {
	width:220px;
	height:400px;
	/*通过底边框加上圆角模拟微笑嘴巴*/
                  	             border-bottom:3px solid #333;
	border-radius:120px;
	position:absolute;
	top:-160px;
	left:45px;
}
/*眼睛*/
            	        .doraemon .eyes {
	position:relative;
	z-index:3;
	/*眼睛在白色脸底下面*/
}
/*眼睛共同的样式*/
            	        .doraemon .eyes .eye {
	width:72px;
	height:82px;
	background:#fff;
	border:2px solid #000;
	border-radius:35px 35px;
	position:absolute;
	top:40px;
}
/*眼珠*/
            	        .doraemon .eyes .eye .black {
	width:14px;
	height:14px;
	background:#000;
	border-radius:7px;
	position:absolute;
	top:40px;
}
.doraemon .eyes .left {
	left:82px;
}
.doraemon .eyes .right {
	left:156px;
}
.doraemon .eyes .eye .bleft {
	left:50px;
}
.doraemon .eyes .eye .bright {
	left:7px;
}
/*胡须背景，主要用于挡住嘴巴的一部分，不要显得太长*/
            	        .doraemon .whiskers {
	width:220px;
	height:80px;
	background:#fff;
	border-radius:15px;
	position:absolute;
	top:120px;
	left:45px;
	z-index:2;
	/*在鼻子和眼睛下面*/
}
/*所有胡子的公用样式*/
            	        .doraemon .whiskers .whisker {
	width:60px;
	height:2px;
	background:#333;
	position:absolute;
	z-index:2;
}
/*右上胡子*/
            	        .doraemon .whiskers .rTop {
	left:165px;
	top:25px;
}
/*右中胡子*/
            	        .doraemon .whiskers .rMiddle {
	left:167px;
	top:45px;
}
/*右下胡子*/
 .doraemon .whiskers .rBottom {
	left:165px;
	top:65px;
}
/*左上胡子*/
  .doraemon .whiskers .lTop {
	left:0;
	top:25px;
}
/*左中胡子*/
            	        .doraemon .whiskers .lMiddle {
	left:-2px;
	top:45px;
}
/*左下胡子*/
            	        .doraemon .whiskers .lBottom {
	left:0;
	top:65px;
}
/*胡子旋转角度*/
            	        .doraemon .whiskers .r160 {
	-webkit-transform:rotate(160deg);
	-moz-transform:rotate(160deg);
	-ms-transform:rotate(160deg);
	-o-transform:rotate(160deg);
	transform:rotate(160deg);
}
.doraemon .whiskers .r20 {
	-webkit-transform:rotate(200deg);
	-moz-transform:rotate(200deg);
	-ms-transform:rotate(200deg);
	-o-transform:rotate(200deg);
	transform:rotate(200deg);
}
/*围脖*/
            	        .doraemon .choker {
	width:230px;
	height:20px;
	background:#c40;
	/*线性渐变 让围巾看上去更自然*/
                	            background:-webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
	background:-moz-linear-gradient(center top,#c40,#800400);
	background:-ms-linear-gradient(center top,#c40,#800400);
	border:2px solid #000;
	border-radius:10px;
	position:relative;
	top:-40px;
	left:45px;
	z-index:4;
}
/*铃铛*/
               .doraemon .choker .bell {
	width:40px;
	height:40px;
	overflow: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:absolute;
	top:5px;
	left:90px;
}
/*双横线*/
              .doraemon .choker .bell_line {
	width:36px;
	height:2px;
	background:#f9f12a;
	border:2px solid #333;
	border-radius:3px 3px 0 0;
	position:absolute;
	top:10px;
}
/*黑点*/
              .doraemon .choker .bell_circle {
	width:12px;
	height:10px;
	background:#000;
	border-radius:5px;
	position:absolute;
	top:20px;
	left:14px;
}
/*黑点下的线*/
               .doraemon .choker .bell_under {
	width:3px;
	height:15px;
	background:#000;
	position:absolute;
	left:18px;
	top:27px;
}
/*铃铛高光*/
               .doraemon .choker .bell_light {
	width:12px;
	height:12px;
	border-radius:10px;
	box-shadow:19px 8px 5px #fff;
	position:absolute;
	top:-5px;
	left:5px;
	opacity:0.7;
}
/*身子*/
               .doraemon .bodys {
	position:relative;
	top:-310px;
}
/*肚子*/
            	        .doraemon .bodys .body {
	width:220px;
	height:165px;
	background:#07beea;
	background:-webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5,#0073b3),color-stop(0.75,#00b0e0),to(#0096be));
	background:-moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
	background:-ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
	border:2px solid #333;
	position:absolute;
	top:265px;
	left:50px;
}
/*白色肚兜*/
            	            .doraemon .bodys .wraps {
	width:170px;
	height:170px;
	background:#fff;
	background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444),to(#000));
	background:-moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
	background:-ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
	border:2px solid #000;
	border-radius:85px;
	position:absolute;
	left:72px;
	top:230px;
}
/*口袋*/
            	            .doraemon .bodys .pocket {
	width:130px;
	height:130px;
	border-radius:65px;
	background:#fff;
	background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd),to(#fff));
	background:-moz-linear-gradient(right top,#fff,#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%,#fff);
	background:-ms-linear-gradient(right top,#fff,#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%,#fff);
	border:2px solid #000;
	position:absolute;
	top:250px;
	left:92px;
}
/*挡住口袋一半*/
            	            .doraemon .bodys .pocket_mask {
	width:134px;
	height:60px;
	background:#fff;
	border-bottom:2px solid #000;
	position:absolute;
	top:259px;
	left:92px;
}
/*左右手*/
                .doraemon .hand_right,.doraemon .hand_left {
	height:100px;
	width:100px;
	position:absolute;
	top:272px;
	left:248px;
}
/*左手*/
                .doraemon .hand_left {
	left:-10px;
}
/*手臂公共部分*/
                .doraemon .arm {
	width:80px;
	height:50px;
	background:#07beea;
	background:-webkit-gradient(linear,left top,left bottom,from(#07beea),color-stop(0.85,#07beea),to(#555));
	background:-moz-linear-gradient(center top,#07BEEA,#07BEEA 85%,#555);
	background:-ms-linear-gradient(center top,#07BEEA,#07BEEA 85%,#555);
	border:1px solid #000000;
	box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
	z-index:-1;
	position:relative;
}
/*右手手臂*/
                .doraemon .hand_right .arm {
	top:17px;
	-webkit-transform:rotate(35deg);
	-moz-transform:rotate(35deg);
	-ms-transform:rotate(35deg);
	-o-transform:rotate(35deg);
	transform:rotate(35deg);
}
/*左手手臂*/
                .doraemon .hand_left .arm {
	top:17px;
	background:#0096be;
	/*背光一面使用纯色，使其有立体感*/
           	                box-shadow:5px -7px 10px rgba(0,0,0,0.25);
	-webkit-transform:rotate(145deg);
	-moz-transform:rotate(145deg);
	-ms-transform:rotate(145deg);
	-o-transform:rotate(145deg);
	transform:rotate(145deg);
}
/*圆形手掌公共部分*/
                .doraemon .circle {
	width:60px;
	height:60px;
	border-radius:30px;
	border:2px solid #000;
	background:#fff;
	background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd),to(#999));
	background:-moz-linear-gradient(right top,#fff,#fff 50%,#eee 70%,#ddd 80%,#999);
	background:-ms-linear-gradient(right top,#fff,#fff 50%,#eee 70%,#ddd 80%,#999);
	position:absolute;
}
/*右手手掌*/
                .doraemon .hand_right .circle {
	left:40px;
	top:32px;
}
/*左手手掌*/
                .doraemon .hand_left .circle {
	left:-20px;
	top:32px;
}
/*手臂和身体结合处，使用背景遮住边框*/
                .doraemon .arm_rewrite {
	height:45px;
	width:5px;
	background:#07beea;
	position:relative;
}
/*右手结合处*/
                .doraemon .hand_right .arm_rewrite {
	top:-45px;
	left:22px;
}
/*左手结合处*/
                .doraemon .hand_left .arm_rewrite {
	top:-45px;
	left:60px;
	background:#0096be;
	/*同理，背光一面使用纯色，使其有立体感*/
}
/*脚部*/
                .doraemon .foot {
	width:280px;
	height:40px;
	position:relative;
	top:55px;
	left:20px;
}
/*左右脚共同样式*/
                .doraemon .foot .left,.doraemon .foot .right {
	width:125px;
	height:30px;
	background:#fff;
	background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),to(#999));
	background:-moz-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);
	background:-ms-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);
	border:2px solid #333;
	border-radius:80px 60px 60px 40px;
	box-shadow:-6px 0 10px rgba(0,0,0,0.35);
	position:relative;
}
.doraemon .foot .left {
	left:8px;
	top:65px;
}
.doraemon .foot .right {
	top:31px;
	left:141px;
}
/*双脚之间的缝隙，加阴影使用立体感*/
                    .doraemon .foot .foot_rewrite {
	width:20px;
	height:10px;
	background:#fff;
	background:-webkit-gradient(linear,right top,left bottom,from(#666),color-stop(0.83,#fff),to(#fff));
	background:-moz-linear-gradient(right top,#666,#fff 83%,#fff);
	background:-ms-linear-gradient(right top,#666,#fff 83%,#fff);
	/*制作半圆效果*/
           	                border:2px solid #000;
	border-bottom:none;
	border-radius:40px 40px 0 0;
	position:relative;
	top:-11px;
	left:130px;
	_left:127px;
}
/*眼珠*/
               .doraemon .eyes .eye .black {
	width:14px;
	height:14px;
	background:#000;
	border-radius:7px;
	position:absolute;
	top:40px;
	-webkit-animation:eyemove 3s linear infinite;
	-moz-animation:eyemove 3s linear infinite;
	-ms-animation:eyemove 3s linear infinite;
	-o-animation:eyemove 3s linear infinite;
	animation:eyemove 3s linear infinite;
}
/*让眼睛动起来*/
               @-webkit-keyframes eyemove {
	70% {
	margin:0 0 0 0;
}
80% {
	margin:-22px 0 0 0;
}
85% {
	margin:-22px 0 0 5px;
}
90% {
	margin:-22px 10px 0 0;
}
93% {
	margin:-22px 0 0 0;
}
96% {
	margin:0 0 0 0;
}
}@-moz-keyframes eyemove {
	70% {
	margin:0 0 0 0;
}
80% {
	margin:-22px 0 0 0;
}
85% {
	margin:-22px 0 0 5px;
}
90% {
	margin:-22px 10px 0 0;
}
93% {
	margin:-22px 0 0 0;
}
96% {
	margin:0 0 0 0;
}
}@-o-keyframes eyemove {
	70% {
	margin:0 0 0 0;
}
80% {
	margin:-22px 0 0 0;
}
85% {
	margin:-22px 0 0 5px;
}
90% {
	margin:-22px 10px 0 0;
}
93% {
	margin:-22px 0 0 0;
}
96% {
	margin:0 0 0 0;
}
}@keyframes eyemove {
	70% {
	margin:0 0 0 0;
}
80% {
	margin:-22px 0 0 0;
}
85% {
	margin:-22px 0 0 5px;
}
90% {
	margin:-22px 10px 0 0;
}
93% {
	margin:-22px 0 0 0;
}
96% {
	margin:0 0 0 0;
}
}

                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
纯css制作哆啦A梦

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             

                         

                     

                   
                


                
1



  
    
      
    
    

     

            
    
              
    
              
      
                
       浅浅请0
      
                
       2017/11/9 13:14:17
      
                
      
              
    
              
      
                
      太牛了，怎么做到的
      
                
                回复