分享几个很实用的CSS技巧对前端技术很有帮助
创建剪切动画
对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低。
.animate {
width: 200px;
height: 200px;
background: #000;
animation: 1s clip;
}
@keyframes clip {
0% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(0 100% 100% 0);
}
}
clip-path也能用来进行其他规则/不规则图形的剪切
.clip {
clip-path: polygon(0 100%, 50% 0, 100% 100%, 0 30%, 100% 30%); /* 多边形 */
clip-path: circle(30px at 35px 35px); /* 圆形 */
clip-path: ellipse(30px 25px at 35px 35px); /* 椭圆 */
}
资源网站大全 https://55wd.com 设计导航https://www.wode007.com/favorites/sjdh
优化动画性能
除了使用transform3d开启gpu加速,还可以使用will-change强制gpu加速优化动画性能
.animate {
width: 200px;
height: 200px;
background: #000;
animation: 1s clip;
will-change: clip-path;
}
@keyframes clip {
0% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(0 100% 100% 0);
}
}
实现长宽比
使用padding模拟,然后子元素使用绝对定位
/* 1:1 */
.container {
width: 200px;
}
.container:after {
display: block;
content: ' ';
padding-top: 100%;
} /* 16:9 */
.container {
width: 200px;
}
.container:after {
display: block;
content: ' ';
padding-top: calc(100% * 9 / 16);
}
垂直居中
我们常用的方式:
- dislay: inline-block
- top: 50% + transform: tranlsateY(-50%)
- display: flex
其余还有padding上下撑高、display: table、position + margin: auto、绝对定位 + margin等等,这些属于不常用、特殊场景才能用、css3之前的hack方式,css3之后就不必使用这些来实现垂直居中,就不多说了。
其中display: flex属于万金油,大多数场景可以直接用它,但还是有些特殊的场景不能用:
- 子元素需要文字截断,为了兼容4.X的Android浏览器,必须使用其他方式(一般是transform)
- 子元素需要多行布局,4.x的Android不支持flex-wrap,不能多行布局
分享几个很实用的CSS技巧对前端技术很有帮助的更多相关文章
- 一个很实用的css技巧简析
我是小雨小雨,专注于更新有趣.实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注.点赞支持一下吧. ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个 ...
- 100个实用的CSS技巧,以及遇见的问题和解决方案。
前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个. 本案例都是经本人实测 ...
- 经验分享:多屏复杂动画CSS技巧三则
当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢sh ...
- 20个很有用的CSS技巧
导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...
- 20个初学者实用的CSS技巧
过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护.得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式. 不论你是 ...
- 分享几个 SpringBoot 实用的小技巧
前言 最近分享的一些源码.框架设计的东西.我发现大家热情不是特别高,想想大多数应该还是正儿八经写代码的居多:这次就分享一点接地气的: SpringBoot 使用中的一些小技巧. 算不上多高大上的东西, ...
- Css学习总结(1)——20个很有用的CSS技巧
1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: graysca ...
- 不常用但是很实用的css记录
本文主旨是记录一些不常用但是非常炫酷的css属性,提升用户体验的捷径之一. 1.background-attachment 滚动视差 https://codepen.io/Chokcoco/p ...
- 浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child
1. Outline(适用范围:鼠标悬浮hover加外边框) 我们在布局的时候,常常会因为添加边框border影响宽高的布局. 那么,outline是完美的替代品,因为它可以在不影响文档流的情况下呈现 ...
随机推荐
- PAT 反转链表
给定一个常数 K 以及一个单链表 L,请编写程序将 L 中每 K 个结点反转.例如:给定 L 为 1→2→3→4→5→6,K 为 3,则输出应该为 3→2→1→6→5→4:如果 K 为 4,则输出应该 ...
- Spring之JdbcTemplate使用
一:JdbcTemplate概述及入门 “Don‘t Reinvent the Wheel” , 这是一句很经典的话,出自Spring官方,翻译过来就是说 “不要重复发明轮子” .由此我们可以猜测,J ...
- DirectX11 With Windows SDK--31 阴影映射
前言 阴影既暗示着光源相对于观察者的位置关系,也从侧面传达了场景中各物体之间的相对位置.本章将起底最基础的阴影映射算法,而像复杂如级联阴影映射这样的技术,也是在阴影映射的基础上发展而来的. 学习目标: ...
- linux基础相关命令
请参照以下文章 shell常用命令:https://www.cnblogs.com/pengtangtang/articles/PengTangTang_linux_base_one.html 通配符 ...
- python自学Day05(自学书籍python编程从入门到实践)
第6章 字典 6.1 一个简单的字典 先跟随书本创建一个简单的字典感受一下. alien_0 = {'color':'green','points':5} print(alien_0['color'] ...
- Spring AOP 扫盲
关于AOP 面向切面编程(Aspect-oriented Programming,俗称AOP)提供了一种面向对象编程(Object-oriented Programming,俗称OOP)的补充,面向对 ...
- Linux内核配置编译及基本调试方法
一.Linux内核配置编译 1. 交叉编译设置:make ARCH=arm CROSS_COMPILE=arm-linux- 注:也可以直接修改顶层Makefile ARCH ?= arm CROSS ...
- ibatis BindingException Parameter 'status' not found. Available parameters are [arg1, arg0, param1, param2] 解决方法
最近做项目测试mapper接口时出现了下面这个异常,接口的函数参数找不到,网上搜索发现可能是@Param注解问题. 查阅Mybatis官方文档对@Param的解释如下: 在代码中加入, 异常消失 测试 ...
- <Win10开发>一些小知识。
这篇文章分享一下UWP开发的一些零散的小知识. 1.设置应用的最小尺寸 主要用在PC上,UWA在PC可以被鼠标随意摆弄,可大可小,界面的响应式设计是一大特点.不过有些时候还是要考虑,我们的App界面元 ...
- IDEA之maven配置详解
这两天被maven配置搞得焦头烂额,前后忙活了三天才彻底搞定. 下面我总结一下配置的步骤. 步骤 1. 首先去maven官网去下载maven,http://maven.apache.org/ 这里教大 ...