html+css制作简易版Baymax

最新推荐文章于 2024-08-18 23:31:20 发布
最新推荐文章于 2024-08-18 23:31:20 发布
阅读量759 收藏
点赞数
分类专栏： web前端 文章标签： css 大白 css3 代码制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/In_computer/article/details/50574966
版权 

</pre>大白的简易版图片如下，我用html+css来制作简易版的大白。<img src="https://img-blog.csdn.net/20160124185839021?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="大白图片" /><p></p><p>直接给出代码如下：</p><p></p><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Baymax made by css</title>
    <!--<link rel="stylesheet" href="css/index.css">-->
    <style type="text/css">
        @charset "utf-8";

        *{
            margin:0px;
            padding:0px;
        }
        img{
            display:block;
            margin:0px 10px;
            position:absolute;
        }
        div{
            border:1px solid black;
            background: white;
        }
        .container{
            position:relative;
            background: transparent;
            border:1px solid transparent;
            width:500px;
            height:425px;
            margin:100px 400px;
        }
        .hand_left{
            width:230px;
            height:93px;
            position: absolute;
            left:-20px;
            top:260px;
            -webkit-transform: rotate(-58deg);
            -moz-transform: rotate(-58deg);
            -ms-transform: rotate(-58deg);
            -o-transform: rotate(-58deg);
            transform: rotate(-58deg);
            border-radius: 190px 160px 130px 130px/90px;
            box-shadow:0px -5px 10px 0 #aeaeae,
            inset 0px 10px 10px 0 #f2f2f2;/*对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}*/
            -moz-box-shadow:0px -5px 10px 0 #aeaeae,
            inset 0px 10px 10px 0 #f2f2f2;
            -webkit-box-shadow:0px -5px 10px 0 #aeaeae,
            inset 0px 10px 10px 0 #f2f2f2 ;
        }
        .hand_right{
            width:230px;
            height:93px;
            position: absolute;
            right:-34px;
            top:260px;
            -webkit-transform: rotate(58deg);
            -moz-transform: rotate(58deg);
            -ms-transform: rotate(58deg);
            -o-transform: rotate(58deg);
            transform: rotate(58deg);
            border-radius: 190px 180px 130px 130px/90px;
            border-radius: 190px 160px 130px 130px/90px;
            box-shadow:0px 5px 10px 0 #aeaeae,
            inset 0px 80px 10px 0 #f2f2f2;/*对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}*/
            -moz-box-shadow:0px 5px 10px 0 #aeaeae,
            inset 0px 80px 10px 0 #f2f2f2;
            -webkit-box-shadow:0px 5px 10px 0 #aeaeae,
            inset 0px 80px 10px 0 #f2f2f2 ;
        }
        .body{
            width:320px;
            height:260px;
            position:absolute;
            bottom: 0px;
            left:95px;
            border-top-left-radius: 140px 150px;
            border-top-right-radius: 140px 150px;
            border-bottom-left-radius: 25px 80px;
            border-bottom-right-radius: 25px 80px;
            box-shadow:inset -80px 0px 100px 0px #f0f0f0,
            inset 80px 0px 100px 0px #f8f8f8;
            -moz-box-shadow:inset -80px 0px 100px 0px #f0f0f0,
            inset 80px 0px 100px 0px #f8f8f8;
            -webkit-box-shadow:inset -80px 0px 100px 0px #f0f0f0,
            inset 80px 0px 100px 0px #f8f8f8;
        }
        .head{
            width:245px;
            height:155px;
            position: absolute;
            top:15px;
            left:127px;
            border-top-left-radius: 90px 100px;
            border-top-right-radius: 90px 100px;
            border-bottom-left-radius: 50px 60px;
            border-bottom-right-radius: 50px 60px;
            box-shadow:-5px 7.5px 15px 0 #969696,
            inset 3px -5px 50px 0 #dddddd;
            -moz-box-shadow:-5px 7.5px 15px 0 #969696,
            inset 3px -5px 50px 0 #dddddd;
            -webkit-box-shadow: -5px 7.5px 15px 0 #969696,
            inset 3px -5px 50px 0 #dddddd;
        }
        .eyes{
            width:0px;
            height:0px;
            border-width: 2.5px 40px;
            border-color: black;
            position:absolute;
            top:72px;
            left:85px;
        }
        .eyes:before,.eyes:after{
            content:"";
            position:absolute;
            width:0px;
            height:0px;
            border:15px solid black;
            border-radius: 15px;
        }
        .eyes:before{
            right:35px;
            top:-15px;
        }
        .eyes:after{
            left:33px;
            top:-15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="hand_left"></div>
        <div class="hand_right"></div>
        <div class="body"></div>
        <div class="head">
            <div class="eyes"></div>
        </div>
    </div>
</body>
</html>


其中有几个难点，第一，如何制作出来并不规则的形状。

        .body{
            width:320px;
            height:260px;
            position:absolute;
            bottom: 0px;
            left:95px;
            border-top-left-radius: 140px 150px;
            border-top-right-radius: 140px 150px;
            border-bottom-left-radius: 25px 80px;
            border-bottom-right-radius: 25px 80px;
            box-shadow:inset -80px 0px 100px 0px #f0f0f0,
            inset 80px 0px 100px 0px #f8f8f8;
            -moz-box-shadow:inset -80px 0px 100px 0px #f0f0f0,
            inset 80px 0px 100px 0px #f8f8f8;
            -webkit-box-shadow:inset -80px 0px 100px 0px #f0f0f0,
            inset 80px 0px 100px 0px #f8f8f8;
        }

就身体的这一段代码而言，对形状的控制是这几句 
<span style="white-space:pre">	</span>    width:320px;
            height:260px;<pre name="code" class="html"><span style="white-space:pre">	</span>    border-top-left-radius: 140px 150px;
            border-top-right-radius: 140px 150px;
            border-bottom-right-radius: 25px 80px;
            border-bottom-left-radius: 25px 80px;
 

 

头两句是控制长和宽，后四句是分别对四个角进行处理，使其成为圆角。重点是对border-radius这个属性的应用。就border-top-left-radius: 140px 150px;来说，它是对左上角进行处理，使得其形成的圆角是以140px为水平半径，150为垂直半径。其他三句意义与此相差不大。值得注意的是对边角处理的这四句等价于border-radius:140px 140px 25px 25px/150px 150px 80px 80px,如果想详细了解border-radius这一属性的用法可以参考http://www.w3cplus.com/css3/border-radius
 

第二：如何给设计出来的图像加阴影。
 

 

 
 
依旧以body这一段css代码来讲解。先看box-shadow的使用方法：对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
 
 
box-shadow:inset -80px 0px 100px 0px #f0f0f0,
 inset 80px 0px 100px 0px #f8f8f8;
 
 
这句的意思对照使用方法就很明了了，值得注意的是box-shadow是可以在里面定义多个阴影的，并且一定用逗号分开。这里我就是加了一个内阴影和外阴影。并且这个属性在不同的浏览器里面的兼容性不是很好，就分别用了带有-moz和-webkit的前缀，用以使用不同内核的浏览器。
 
 

 
 
 
好了，下面看看代码的效果图！！
 
 
 
  用css制作的大白 
  
 
 
 
 
是不是很像~~
 
 
 
如果原文中有什么漏洞或不足，欢迎指正，敬请期待新得博文更新
 


                

        

        

    




    

      

        

            

              
                
                  茫然之大定
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
写一个简单的HTML页面及添加CSS样式

				
			

			

				

					程序媛乐园
				

				

					09-26
					
					1万+
					
				

			

		

		

			
				
简单的HTML页面添加CSS
就是把效果分离开来，独立写一个SCC样式。
效果图

HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" typ...

			
		

	



                

              
                



	

		

			

				
					
用HTML+CSS做一个漂亮简单的个人网页（第二篇）

				
			

			

				

					qq_42523321的博客
				

				

					06-10
					
					3万+
					
				

			

		

		

			
				
个人网页设计及代码

			
		

	



                


  
              

                


	

		

			

				
					
html+css编写的简单静态页面.rar

				
			

			

				

					10-14
				

			

		

		

			
				
使用html、css、div、float、ul写的一个简单的静态页面

			
		

	





	

		

			

				
					
html和css制作简单的页面,HTML+CSS基础训练之作一个简单页面的布局

				
			

			

				

					weixin_39982537的博客
				

				

					06-05
					
					840
					
				

			

		

		

			
				
@HTML+CSS基础之一个简单页面的布局cssHTML+CSS基础训练之作一个简单页面的布局为了更好的学习WEB前端开发技术，本人将根据专业课所学以及自学的成果进行总结整理并实时更新分享！！俺只是一名大二的小????️????第一次写文章 请你们多多海涵。下面进入正题：布局是网页设计的基础中的基础，一个好的布局可让人一目了然，一个失败的布局会让协同人员抓狂。因此前端开发，从布局开始。html1、任务介绍如图...

			
		

	



		

			
		



	

		

			

				
					
看到别人用css3写的baymax ，大白，挺萌的

				
			

			

				

					a_water_drop的专栏
				

				

					03-17
					
					634
					
				

			

		

		

			
				
http://www.w3cfuns.com/blog-5455933-5404334.html 这是作者博客，转载和使用请标明。




无标题文档

*{ margin:0; padding:0;}
body{ background:#999;}
.Baymax{width:300px; height:600px; margin:20px auto auto auto;  position:

			
		

	





	

		

			

				
					
Html+css制作静态官网页面.zip

				
			

			

				

					06-03
				

			

		

		

			
				
Html+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml...

			
		

	





	

		

			

				
					
HTML+css制作简易进度条

				
			

			

				

					09-28
				

			

		

		

			
				
HTML和CSS是构建网页内容和样式的两大基础技术。其中HTML负责页面的结构，而CSS...当涉及到更复杂的进度条实现时，可能需要引入JavaScript来处理动态数据，但基本的HTML结构和CSS样式始终是制作进度条不可或缺的基石。

			
		

	





	

		

			

				
					
网页设计期末大作业+html+css

				
			

			

				

					05-25
				

			

		

		

			
				
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做

			
		

	





	

		

			

				
					
《html+css+javascript 网页制作案例教程》源代码

				
			

			

				

					04-02
				

			

		

		

			
				
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...

			
		

	





	

		

			

				
					
通过html+css+js制作随机点名

				
			

			

				

					09-26
				

			

		

		

			
				
这是由html+css+js制作的一个随机点名页面，下载后可以直接双击点开就可以使用啦，如果想要符合自己的需求，可以抖音搜索122355808或者哔哩哔哩搜索 web-lyh 观看教学视频。 这个页面适合老师使用，可以将内容换成...

			
		

	





	

		

			

				
					
一个简单的CSS+html页面

				
			

			

				

					yinghuiyangliu的博客
				

				

					11-30
					
					422
					
				

			

		

		

			
				
https://zyhyangliu.com
自己写了一个简单的CSS 一面，下面是代码：



      
      Title
      

      
               这里是侧边栏
               
               下面可以添加内容
               
               .
               .
     ...

			
		

	





	

		

			

				
					
html如何制作css文档,css制作流程及标准

				
			

			

				

					weixin_42696271的博客
				

				

					06-03
					
					830
					
				

			

		

		

			
				
(一)制作流程：1，创建文件(文件管理及命名)2，与html文档建立关系注意点：1)不建议使用：内联样式和内嵌样式原因：结构(html)和表现(css样式)没有分离2)区别：外链样式与导入样式3)网站常用：外链样式3，制作页面样式注意点：同html框架一致从上到下从整体到局部共用样式到个别样式4，添加注释注释范围：1)每个文档对应一个文档注释(方便后期维护和管理)主要注释说明：文档创建人，时间，内...

			
		

	





	

		

			

				
					
用html和css来编辑一个简单的html页面

				
			

			

				

					weixin_30642561的博客
				

				

					11-03
					
					149
					
				

			

		

		

			
				
传智播客模板页
下面先来看一下效果图

首先分析一下，该页面有3个部分头部，主体部分，尾部
下面我们来看一下头部，首先，头部的背景是渐变效果，我们光靠代码无法编辑出来，只能使用fireworks软件切图
传智播客的logo和banner广告词
也要切下来，这样既提高了网页在浏览器上的加载效率，也减少了开发难度。
切图界面如下：


现在可以开始写代码了，首先建立一个...

			
		

	





	

		

			

				
					
HTML+CSS写一个简单的小项目

				
			

			

				

					dkki11的博客
				

				

					12-11
					
					2587
					
				

			

		

		

			
				
HTML+CSS写一个小项目
最近在学前端，花了一个月才基本把html和css基本搞清楚，现在在学习js和react方面的有关内容，想着之前学过的前端知识不能丢掉，于是乎萌生出了这样一个想法。那么，不如直接动手操作，于是我打开电脑，操作了起来。
首先是HTML部分
这部分算是比较简单的，主要是用div盒子放图片和文字
代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

			
		

	





	

		

			

				
					
HTML+CSS做一个漂亮的网页

					
热门推荐

				
			

			

				

					前端攻城狮进阶之路
				

				

					06-26
					
					6万+
					
				

			

		

		

			
				
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;title&gt;test9-11&

			
		

	





	

		

			

				
					
如何用Html+css3写一个简单的网页

				
			

			

				

					newlifemain的博客
				

				

					12-01
					
					7944
					
				

			

		

		

			
				
*/我这次利用一门前端开发语言Html开发一个简单的网页/*


    
    程序猿de代码生活
     
       
      body{                                                     /* 利用了我所学的皮毛运用css

			
		

	





	

		

			

				
					
css设置元素居中显示

				
			

			

				

					DN金猿的博客
				

				

					08-18
					
					259
					
				

			

		

		

			
				
CSS中实现居中显示可以通过不同的属性来实现，取决于你是要水平居中还是垂直居中，或者两者都要。4.水平和垂直居中 - 使用flexbox。选择合适的方法取决于你的具体需求和上下文。5.水平和垂直居中 - 使用定位和转换。6.水平和垂直居中 - 使用grid。1.水平居中 - 行内元素或文本。2.水平居中 - 块级元素。3.垂直居中 - 单行文本。

			
		

	





	

		

			

				
					
【前端 23】用Less优化你的CSS书写体验

					
最新发布

				
			

			

				

					delepaste的博客
				

				

					08-18
					
					844
					
				

			

		

		

			
				
Less（Leaner Style Sheets）是一种CSS预处理器，它扩展了CSS的功能，引入了变量、嵌套规则、混合（Mixins）、运算等特性，使得CSS编写更加灵活和强大。下面，我们将详细介绍如何在VS Code中使用Less，包括基础语法和一些实用的VS Code插件。

			
		

	





	

		

			

				
					
CSS的:only-child伪类：精准定位单一子元素的样式艺术

				
			

			

				

					2402_85758349的博客
				

				

					08-18
					
					533
					
				

			

		

		

			
				
伪类选择器是CSS中用来选择元素的特定状态或属性的关键字。例如，:hover伪类用于选择鼠标悬停时的元素。伪类则用于选择唯一的子元素。

			
		

	





	

		

			

				
					
HTML+CSS个人网站制作教程：从规划到首页实现

				
			

			

				

					
				

			

		

		

			
				
"轻松学HTML+CSS之个人网站制作.pptx"  在学习如何使用HTML和CSS制作个人网站的过程中，首先要理解个人网站的重要性。个人网站不仅是一个展示自我、分享想法的平台，也是一种在线自我表达的方式。随着互联网的普及，...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值