学习硬注重原理，才能在瞬息万变技术行业站稳脚跟！

接着上一篇文章，今天把剩下的干货补全

7. 平行四边形

有没有办法只让容器的形状倾斜而保持其内容不变呢？或许你会想到嵌套两层元素，外层skew（）,对内容在应用一次反相skew变形，从而抵消变形的效果。但是意味着我们不得不使用一层额外的HTML元素包裹内容.有些累赘

解决方案：伪元素，把样式应用到伪元素上，对伪元素进行变形，再把伪元素定位+层级放到到住宿元素下面

光说不练，假把式试一试

8. 梯形标签页

在网页中我们经常见到梯形形状的标签页，常见的技巧都是比较杂乱，或者说难以维护的，那他们是如何实现的呢？

解决方案： 三维世界中旋转一个矩形，由于透视关系，我们在二维图像上看到一个梯形，再结合平行四边实现的方法便能实现

perspective: 观察者与z=0平面的距离;

对元素使用了3D变形之后，其内部的变形效应是"不可逆转的"，和2D变形不同（2D变形内部的逆向变形可以抵消外部的变形效应）；

为了让他的尺寸更好掌握，我们可以为他指定transform-origin：bottom;也可用scale()对他在进行美观操作；

试一试

9. 简单的饼图

饼图在网页中的运用极为常见，比如简单的统计表，进度指示器，如果我们不用图像处理器，和JavaScript，那要如何去实践呢？

解决方案:伪元素，变形属性和css渐变实现

1.把这个元素设置为一个圆形；

2.用一个简单线性渐变来把图像的有半部分设为其他颜色

3.用伪元素覆盖到这个元素的渐变区域上面去（看起来这个元素和第一步效果一样），通过旋转来决定漏出多大扇区；

4.transform属性旋转一定的角度

如果我们想要看到一个静态的不同比率的饼状图哪有如何解决呢？

解决方案：很简单，我们只需将上面用到的那个动画处于暂停状态就好了

animation-play-state: paused;

animation-delay: 设置为负；负的动画延时，让动画一开始就直接跳至设置的时间点。即负负得正；

10. 自适应内部元素

如果不给一个元素指定具体的height，他就会自动适应其内容的高度，如果我们希望width也具有类似的行为该怎么实现呢？？

解决方案: css内部与外部尺寸模型:min-content

理解CSS3 max/min-content及fit-content等width值

min-content：宽度表示的并不是内部那个宽度小就是那个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。

首先，我们要明白这里的“最小宽度值”是什么意思。替换元素，例如图片的最小宽度值就是图片呈现的宽度，对于文本元素，如果全部是中文，则最小宽度值就是一个中文的宽度值；如果包含英文，因为默认英文单词不换行，所以，最小宽度可能就是里面最长的英文单词的宽度。So，大家明白的说。

11. 满幅的背景，定宽的内容

类似的布局我们在网页中经常遇见，通常是在页脚和导航；如果我们只使用一个元素该如实现这个效果呢？

解决方案：calc()函数

margin:0 auto;所产生的左右外边距实际上都等于视口宽度的一半减去内容宽度的一半；

因此我们可以使用 padding：0 calc(50%-width/2);

12. 垂直居中

在css中对元素进行水平居中垂直居中，我们在页面布局的时候会经常用到。相信每个人都有一套自己实现的方式；

我想介绍一下FlexBox的解决方案

display: flex;

align-items：垂直方向上的对齐方式；

justify-content：水平方向上的对齐方式；

试一试我推荐的方案吧！试一试

13. 紧贴底部的页脚

一个具有块级样式的页脚，当页面内容足够长时他一切正常，但是当页面比较短时，就会出现问题；页脚就不能像我们期望中那样紧贴在视口的最底部，而是在内容的下方

解决方案：flex弹性布局

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex-grow：定义项目的放大比例。默认0，不放大。1等分剩余空间

flex-shrink：项目的缩小比例默认为1，如果空间不足，等比缩小

flex-basis：项目占据主轴空间

试一试

14. 缓动效果

给过渡和动画加上缓动效果是一种流行的表现手法，可以让界面显得更加生动和真实，但是在现实世界中，物体从a到b点的移动往往不是 完全匀速的，因此我们需要对动画效果加以调整，使得更加逼真

解决方案：我们可以用animation-timing-function的调速函数和反向版本，模拟现实世界的速度变化css的transform只对块级元素有用

如果是反反复复的循环函数，我们也可以用可用animation-direction来反转循环的周期函数；

animation-directon:reverse;反转每一个循环周期；

animation-direction:alternate;反转第偶数循环周期；

animation-direction:alternate-reverse;反转第奇循环周期；

首先介绍一下animation-timing-function

animation-timing-function：属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个；(ease-in,ease-out,ease-in-out,linear,steps(),cubic-bezier())；

cubic-bezier()函数，允许我们指定自定义调速函数；cubic-bezier(x1,y1,x2,y2);(x1,y1)表示第一个-P1控制锚点的坐标,(x2,y2)，表示第二个-P2;曲线的片段分别固定在(0,0)-P0起点,(1,1)-P4终点;

我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。

把控制锚点的水平坐标和垂直坐标互换，就可以得到任何调速函数的反向版本

steps()：是一个阶跃函数，用于把整个操作领域切分为相同大小的间隔，每个间隔都是相等的。

steps 第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

弹跳动画，球体自由落体运动，在下降的过程中匀加速我们可用ease-out;弹起方向是匀减速我们可用ease-in;

15. 逐帧动画

有时候我们想要实现连续的动画帧，动画帧之间然不需要过渡的状态。而我们在实现中往往会失败？

解决方案:steps()会根据你指定的步数量，把整个动画切分为多个针，而且整个动画帧与帧之间硬切，不会有任何过渡效果

step-start和step-end是steps(1,start)和steps(1,end)的简写；

16. 沿环形平移的动

当一个元素沿着环形进行移动的同时，我们希望它能保存自己原本的的朝向。那我们该如何去实现呢？或许你已经有了你的方法啦！但我的方法可能会比你的更加优化

我们可以用前面介绍的嵌套的两层相互抵消，用内层的变形来抵消外层变形的效果；即两层的旋转方向相反；

但是这样还不是特别理想，如果只用一个元素那要怎么去实现呢？

transform-origin只是一个语法糖，实际上你总是可以用translate()来代替；变形函数并不是孤立存在；如下图可证实：

17. 自定义复选框

我们对于美得追求是永无止境的，但是复选框，单选框的样式的样式总是不如我们如意。虽然js能够实现效果，但是代码停臃肿。那我们有什么去实现呢？

解决方案：:checked伪类，这个伪类只有在复选框被勾选时才会匹配，不论是由用户交互触发，还是有脚本触发

当< label > 元素与复选框关联之后，可以起到触发开关的作用

label 不是复选框那样的替换元素,我们可以为他添加生成性内容(伪元素),并基于复选框的状态来为其设置样式，然后把真正的复选框隐藏起来（但不能把它从tab键切换焦点的队列中完全删除），再生成性内容美化一番，用来顶替原来的复选框！

可替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容