css练手-android机器人

最新推荐文章于 2021-07-01 03:01:21 发布
最新推荐文章于 2021-07-01 03:01:21 发布
阅读量1.2k 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenke__hxx/article/details/16859795
版权 

好像最近忙课设，不怎么写前端代码了。所以特意写点css练练手，自己好歹也用android两三年，干脆写个机器人吧，博客排版出错了，大家将就着吧，不知道怎么改啊

<!DOCTYPE>
<html>
<head></head>
<style type="text/css">
	.android{
		position: absolute;
		left: 500px;
		top: 200px;
	}
	/* head */
	.head{
		width: 336px;
		height: 155px;
		background: #a5c63b;
		border-radius: 200px 200px 0 0;
		position: absolute;
		top: -170px;
	}
	.head:before, .head:after{
		background: #a5c63b;
		content: '';
		width: 10px;
		height: 53px;
		position: absolute;
		top: -30px;
		border-radius: 20px 20px 0 0;
	}
	.head:before{
		-webkit-transform: translate(255px, 0px) rotate(30deg); 
		-moz-transform:translate(255px, 0px) rotate(30deg); 
		-o-transform:translate(255px, 0px) rotate(30deg); 
	}
	.head:after{
		-webkit-transform: translate(63px, 0px) rotate(-30deg);
		-moz-transform: translate(63px, 0px) rotate(-30deg);
		-o-transform: translate(63px, 0px) rotate(-30deg);
	}
	/* eyes */
	.eyes:before, .eyes:after{
		background: #fff;
		content: '';
		width: 27px;
		height: 27px;
		top: 68px;
		position: absolute;
		border-radius: 20px;
	}
	.eyes:before{
		left: 78px;
	}
	.eyes:after{
		right: 78px;
	}
	/* body */
	.body{
		width: 336px;
		height: 285px;
		background: #a5c63b;
		border-radius: 0px 0px 30px 30px;
		position: absolute;
	}
	.body:before, .body:after{
		background: #a5c63b;
		content: '';
		width: 75px;
		height: 122px;
		bottom: -122px;
		position: absolute;
		border-radius: 0 0 50px 50px;

	}
	.body:before{
		left: 68px;
	}
	.body:after{
		right: 68px;
	}
	/* arms */
	.arms:before, .arms:after{
		background: #a5c63b;
		content: '';
		width: 75px;
		height: 233px;
		top:-8px;
		position: absolute;
		border-radius: 40px;
	}
	.arms:before{
		left: -90px;
	}
	.arms:after{
		right: -90px;
	}
	
</style>
<body>
	<div class="android">
		<div class="head">
			<div class="eyes"></div>
		</div>
		<div class="body">
			<div class="arms"></div>
		</div>
	</div>
</body>
</html>































                

        

        

    




    

      

        

            

              
                
                  chenke__hxx
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
用css写个android机器人代码分享

				
			

			

				

					09-25
				

			

		

		

			
				
用css写个android机器人，大家可以运行下面的代码看看效果哟

			
		

	



                

              
                



	

		

			

				
					
css绘制安卓机器人

				
			

			

				

					weixin_44984664的博客
				

				

					02-28
					
					1129
					
				

			

		

		

			
				
css练习——绘制安卓机器人

一个学校里BBS的学长的布置的小练习 (￣ ‘i ￣;) 
用css画一个安卓机器人
效果如下

虽然有点丑……
不管啦 (*￣rǒ￣)
接下来是相关的步骤

画身体
画jiojio
画头
画手手
画眼睛
画天线（耳朵）

总体概述
写这个用到的知识有css盒子模型，position定位，伪类选择器，图像的旋转
上代码！
<body>
<div c...

			
		

	



                


  
              

                


	

		

			

				
					
html如何制作安卓,css绘制安卓机器人

				
			

			

				

					weixin_39783857的博客
				

				

					07-01
					
					316
					
				

			

		

		

			
				
* {margin:0;padding:0;}.center {width:350px;height:450px;margin:0 auto;/* border:1px solid red;*/position:relative;transition:all 5s ease;}.center:hover {opacity:.01;background-color:aquamarine;}.head...

			
		

	





	

		

			

				
					
CSS绘制安卓机器人

				
			

			

				

					tianpeiwen的专栏
				

				

					12-21
					
					1251
					
				

			

		

		

			
				
android的logo是一个有几个简单图形组成的机器人。本文的主要内容就是用纯CSS3技术和较少的HTML代码完成这个logo的绘制。

需要支持CSS3技术的浏览器来查看效果（ie9，火狐，谷歌或者opera都可）。





    
        
    
    
        
    


复制代码


.android {
    po

			
		

	



		

			
		



	

		

			

				
					
CSS3小案例之安卓机器人

				
			

			

				

					qq_43537987的博客
				

				

					04-18
					
					608
					
				

			

		

		

			
				
效果展示：

知识点：
1.伪元素选择器.head::before,.head::after {}
一定要加content: ;
2.设置圆角
border-radius: 50%;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
代码：
<!DOCTYPE html>
<html lang="...

			
		

	





	

		

			

				
					
css-pro-layout：CSS库，用于构建响应式和可自定义的布局

				
			

			

				

					02-03
				

			

		

		

			
				
CSS Pro布局 CSS库，用于构建响应式和可自定义的...import 'css-pro-layout/dist/css/css-pro-layout.css' ; CDN  您也可以使用的CDN链接 < link href =" https://unpkg.com/css-pro-layout/dist/css/css-pro-layout

			
		

	





	

		

			

				
					
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀

				
			

			

				

					05-12
				

			

		

		

			
				
$ npm install postcss-prefix-selector  与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be processed const css = fs . readFileSync ( "input.css" , "utf8" ) const out ...

			
		

	





	

		

			

				
					
postcss-selector-namespace:使用postcss命名CSS选择器

				
			

			

				

					05-13
				

			

		

		

			
				
postcss-选择器命名空间 安装 $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) ...

			
		

	





	

		

			

				
					
好玩的CSS3（2）--圆角半径实现安卓机器人

				
			

			

				

					weixin_41105030的博客
				

				

					03-28
					
					348
					
				

			

		

		

			
				
效果图


上百度找了个图片，实现大概这样一个效果，一看就是被绿过得机器人…只要锄头使的好，没有代码挖不到。顺便我们对它的结构先进行分析
实现方法有很多种，可以构造自己的结构。也可以使用定位来布局…

border-radius

允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

border-radius是一个简写属...

			
		

	





	

		

			

				
					
使用html5 canvas 绘制Android机器人

				
			

			

				

					Robocop_Mao的博客
				

				

					09-26
					
					3336
					
				

			

		

		

			
				
练习使用Html5 canvas 绘制Android机器人。
  要点：当对画布进行变换的时候，需要使用 save() 方法 和 restore() 方法，它们应该成对使用，且 restore() 方法不能比 save() 方法多。我们只需要每次在画布变换前使用 save() 方法保存其初始状态，之后使用  restore() 方法恢复到上一次保存的状态即可。
    <!DOCTYPE html>

			
		

	





	

		

			

				
					
css3绘制机器人

				
			

			

				

					yy_9_aa的博客
				

				

					10-12
					
					828
					
				

			

		

		

			
				
想不想用纯代码来绘制图形，而且不使用h5的cavas,zz只用css3，下面我来示范下:

html>
html>
head lang="en">
    meta charset="UTF-8">
    title>title>
    style   type="text/css">
        body {
            margin: 0;
            pa

			
		

	





	

		

			

				
					
Web 利用纯html和css画出一个android机器人

				
			

			

				

					Sword Art Online
				

				

					02-12
					
					1353
					
				

			

		

		

			
				
Android机器人



这个小项目是为了熟悉border-radius 圆角边框

参考文档

border-radius



源代码


<style>
    .robot{
        width: 500px;
        height: 550px;
        border: 1px solid red;
        margin: 30px aut...

			
		

	





	

		

			

				
					
Android机器人纯HTML

				
			

			

				

					qq_41418149的博客
				

				

					11-14
					
					695
					
				

			

		

		

			
				
Web前段基础
HTML-01Android机器人

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
...

			
		

	





	

		

			

				
					
用CSS3做的一个安卓机器人图

				
			

			

				

					simple5960的博客
				

				

					09-17
					
					546
					
				

			

		

		

			
				
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
          

			
		

	





	

		

			

				
					
使用CSS3绘制简单的Android机器人

				
			

			

				

					Evan_QB的博客
				

				

					10-07
					
					1307
					
				

			

		

		

			
				
html

    
        
            
            
            
        
    


CSS部分

    body{
        margin: 0;
        padding: 0;
        background-color: #f7f7f7;
    }

    .board{
        wid

			
		

	





	

		

			

				
					
vasp6.3.2安装包

				
			

			

				

					08-19
				

			

		

		

			
				
VASP（Vienna Ab-initio Simulation Package）是一个用于电子结构计算和量子力学-分子动力学模拟的软件包，由维也纳大学的Hafner小组开发。 它基于密度泛函理论（DFT）和赝势平面波基组，广泛应用于材料模拟和计算物质科学研究领域。VASP能够处理周期性和非周期性体系，包括金属、半导体、分子、晶体、掺杂体系、复合材料、纳米材料等，提供精确的电子性质预测和理化性质分析。由于其高效的大规模并行计算能力，VASP在国际上享有很高的声誉，是第一性原理计算领域最权威的软件之一。每年，以VASP作为科研工具发表的论文数量众多，包括在顶级科学期刊上发表的研究成果。物理与电子科学学院等多名教师使用VASP进行科研工作，并取得了多项研究成果。‌

			
		

	





	

		

			

				
					
计算机毕业设计SSM员工人事工资管理系统论文

				
			

			

				

					08-19
				

			

		

		

			
				
计算机毕业设计SSM员工人事工资管理系统论文

			
		

	





	

		

			

				
					
根据文档框架生成内容草稿版

					
最新发布

				
			

			

				

					08-19
				

			

		

		

			
				
根据文档框架生成内容

			
		

	





	

		

			

				
					
css-in-css

				
			

			

				

					02-05
				

			

		

		

			
				
CSS-in-CSS是一种前端开发技术，也被称为CSS嵌套或CSS模块化。它的主要思想是将CSS样式定义在组件级别，使得样式与组件的逻辑和结构紧密关联，提高代码的可维护性和可重用性。  在传统的CSS开发中，样式是全局共享的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值