画一个皮卡丘项目小结

Posted ygming

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了画一个皮卡丘项目小结相关的知识,希望对你有一定的参考价值。

前言

今天开始做一个 画皮卡丘的项目,所以总结一下过程中学到的一些新知识。

一 设置盒模型

设置盒模型为 IE盒模型:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::after, *::before{              /*注释1: css3伪元素*/
  box-sizing: border-box;
}

二 flex布局

通过flex布局,形成绝对居中的效果:

body{
  height: 100vh;                  /* 注释2:css3单位*/
  border: 1px solid green;
  display: flex;                  /*注释3: css3 flex布局*/
  justify-content: center;
  align-items: center;
}

三 水平居中的方法:

通过相对定位和绝对定位,形成水平居中:

.wrapper{
  width: 100%;
  height: 165px;
  border: 1px solid red;
  position: relative;          /*注释4:和绝对定位配合,实现水平居中*/
}

.nose{
  width: 22px;
  height: 22px; 
  background: black;   
  position: absolute;   /*注释5:相对于最近的 非static布局的 父元素*/
  left: 50%;                  /*注释6:整体的左上角移动到中间*/
  top: 28px; 
  transform: translateX(-50%); /*注释7:css3属性让整体向左平移 负50%*/

四 形成一个扇形:

S1 先构造一个正方形:

.nose{
  width: 22px;   /*之所以设置宽高,是为了确定下面的 圆角半径*/
  height: 22px; 
  background: black; 

S2 再从正方形构造成圆形:

.nose{
  width: 22px;
  height: 22px; 
  border-radius: 11px;  /*让半径/宽度=50%即可*/
  background: black;    /*背景是是黑色的 圆形*/

S3 直接利用边框构造圆形:

.nose{
  width: 0;     /*把宽高都置为0,从而利用boder构造圆*/
  height: 0;   
  border: 11px solid red; /*把宽高都置为0,从而利用boder构造红色的圆*/
  border-radius: 11px;
}

S4 设置边框圆的四个颜色:

.nose{
  width: 0;    
  height: 0;   
  border: 11px solid red; 
  border-radius: 11px;
  
 border-color: black transparent transparent;   /*分别设置边框颜色*/
}

S5 微调一下颜色和宽度:

.nose{
  width: 0;    
  height: 0;  
  border-radius: 11px;
  border-color: black transparent transparent;  
 
  border-width: 12px;
  border-style: solid;
}

五 创建圆里面,还有一个小圆:

S1 先构造一个正方形,且水平居中:

.eye{                  
  width: 49px;         /*创建一个正方形*/
  height: 49px;
  background: #3e3e3e;
  position: absolute;    /*绝对定位*/
}
.eye.left{
  right: 50%;
  margin-right: 90px;   /*水平居中*/
}

S2 再创建圆:

.eye{                 
  width: 49px;
  height: 49px;
  background: #3e3e3e;
  border-radius: 50%;             /*创建圆*/
  border: 2px solid black;       /*创建圆的边框色*/
}

S3 创建圆里的小圆,并用绝对定位微调其位置:

.eye::before{
  content: ‘‘;            /*必须要有的*/
  display: block;         /*默认类型是 inline*/
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  
  position: absolute;
  left: 6px;            /*距离相对元素左边6px,即右移6px*/
  top: -1px;            /*距离相对元素上面-1px,即下移-1px*/  
}

六 Reference

??1 border-radius圆角详解;
??2 详解 CSS属性::before & ::after;

以上是关于画一个皮卡丘项目小结的主要内容,如果未能解决你的问题,请参考以下文章

画一个皮卡丘项目小结

画一个皮卡丘项目小结

用css以写代码形式画一个皮卡丘

教你用Python画哆啦A梦海绵宝宝皮卡丘史迪仔!

❤️用Python+turtle模块实现生成皮卡丘❤️(附源码)

为啥这个 CSS 片段可以画一个三角形? [复制]