那些被你遗忘的CSS,在这里一律给你补全「完结」

摘要:学习硬注重原理,才能在瞬息万变技术行业站稳脚跟!接着上一篇文章,今天把剩下的干货补全7. 平行四边形有没有办法只让容器的形状倾斜而保持其内容不变呢?或者许你会想到嵌套两层元素,外层skew(),对内容在应使用一次反相skew变形,从而抵消变形的效果。但是意味着我们不得不用一层额外的HTML元素包裹内

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

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

7. 平行四边形

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

处理方案:伪元素,把样式应使用到伪元素上,对伪元素进行变形,再把伪元素定位+层级放到到住宿元素下面

光说不练,假把式试一试

8. 梯形标签页

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

处理方案: 三维世界中旋转一个矩形,因为透视关系,我们在二维图像上看到一个梯形,再结合平行四边实现的方法便能实现

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

对元素用了3D变形之后,其内部的变形效应是"不可逆转的",和2D变形不同(2D变形内部的逆向变形可以抵消外部的变形效应);

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

那些被你遗忘的CSS,在这里一律给你补全「完结」

那些被你遗忘的CSS,在这里一律给你补全「完结」

试一试

9. 简单的饼图

饼图在网页中的运使用极为常见,比方简单的统计表,进度指示器,假如我们不使用图像解决器,和JavaScript,那要如何去实践呢?

处理方案:伪元素,变形属性和css渐变实现

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

那些被你遗忘的CSS,在这里一律给你补全「完结」

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

那些被你遗忘的CSS,在这里一律给你补全「完结」

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

那些被你遗忘的CSS,在这里一律给你补全「完结」

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

那些被你遗忘的CSS,在这里一律给你补全「完结」

假如我们想要看到一个静态的不同比率的饼状图哪有如何处理呢?

处理方案:很简单,我们只要将上面使用到的那个动画处于暂停状态就好了

animation-play-state: paused;

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

10. 自适应内部元素

假如不给一个元素指定具体的height,他就会自动适应其内容的高度,假如我们希望width也具备相似的行为该怎样实现呢??

处理方案: css内部与外部尺寸模型:min-content

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

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

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

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

那些被你遗忘的CSS,在这里一律给你补全「完结」

相似的布局我们在网页中经常遇见,通常是在页脚和导航;假如我们只用一个元素该照实现这个效果呢?

处理方案:calc()函数

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

因而我们可以用 padding:0 calc(50%-width/2);

12. 垂直居中

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

我想详情一下FlexBox的处理方案

display: flex;

align-items:垂直方向上的对齐方式;

justify-content:水平方向上的对齐方式;

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

13. 紧贴底部的页脚

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

那些被你遗忘的CSS,在这里一律给你补全「完结」

处理方案: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());

那些被你遗忘的CSS,在这里一律给你补全「完结」

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 轴的取值没有规定,当然也毋须过大。

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

那些被你遗忘的CSS,在这里一律给你补全「完结」

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

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

那些被你遗忘的CSS,在这里一律给你补全「完结」

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

15. 逐帧动画

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

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

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

16. 沿环形平移的动

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

我们可以使用前面详情的嵌套的两层相互抵消,使用内层的变形来抵消外层变形的效果;即两层的旋转方向相反;

但是这样还不是特别理想,假如只使用一个元素那要怎样去实现呢?

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

那些被你遗忘的CSS,在这里一律给你补全「完结」

17. 自己设置复选框

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

处理方案::checked伪类,这个伪类只有在复选框被勾选时才会匹配,不管是由使用户交互触发,还是有脚本触发

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

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

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

那些被你遗忘的CSS,在这里一律给你补全「完结」

  • 全部评论(0)
最新发布的资讯信息
【系统环境|windows】Axios 取消重复请求(2020-11-08 07:00)
【系统环境|windows】熬了一晚上,小白用Python写了一个股票提示系统(2020-11-08 07:00)
【系统环境|windows】2020要想成为一名专业的web前台开发程序员,需要学习什么?(2020-11-08 06:35)
【系统环境|windows】前台面试每日 3+1 —— 第546天(2020-11-08 06:34)
【系统环境|windows】聊聊前台工程师的职业发展 (纯干货)(2020-11-08 06:34)
【系统环境|windows】浅谈OAuth 2.0基本原理(2020-11-08 06:34)
【系统环境|windows】程序员初入职场避坑指南(2020-11-08 06:34)
【系统环境|windows】python的绘图利器--海龟绘图turtle(2020-11-08 06:33)
【系统环境|windows】pyinstaller打包结果瘦身(2020-11-08 06:33)
【系统环境|windows】前台面试每日 3+1 —— 第518天(2020-11-08 06:33)
手机二维码手机访问领取大礼包
返回顶部