分享几个很实用的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是完美的替代品,因为它可以在不影响文档流的情况下呈现 ...
随机推荐
- 第03组 Alpha(2/4)
队名:不等式方程组 组长博客 作业博客 团队项目进度 组员一:张逸杰(组长) 过去两天完成的任务: 文字/口头描述: 制定了初步的项目计划,并开始学习一些推荐.搜索类算法 GitHub签入纪录: 暂无 ...
- 给Linux小白的CentOS8.1基本安装说明
写在前面的话:用过Linux的同学应该都会觉得Linux安装是件非常简单的事情,根本不值得用博客记下来!但是我发现,其实没接触过Linux的同学还真不一定会装,就像在IT行业工作过几年但一直用Wind ...
- void out2() const{
include "stdafx.h" include using namespace std; class aa{ int num; public: aa(){ int b =10 ...
- DeDecms远程写入漏洞webshell (dedecms漏洞)
解释下Apache解析文件的流程: 当Apache检测到一个文件有多个扩展名时,如1.php.bak,会从右向左判断,直到有一个Apache认识的扩展名.如果所有的扩展名Apache都不认识,那么变会 ...
- RabbitMQ系列之【设置RabbitMQ远程ip登录】
由于账号guest具有所有的操作权限,并且又是默认账号,出于安全因素的考虑,guest用户只能通过localhost登陆使用,并建议修改guest用户的密码以及新建其他账号管理使用rabbitmq. ...
- 【转载】自动化魔方求解器的Bug——选择合适的色彩空间
目录 1. 准备工作-- 2. RGB颜色空间 3. LAB色彩空间 4. YCrCb色彩空间 5. HSV色彩空间 Color spaces in OpenCV (C++ / Python) 几天前 ...
- Python正则式 - re
目录 1. 相关概念 1.1. rstring 1.2. 元字符 2. 模式Pattern 2.1. re.flag 3. API 4. 其他 4.1. 单词边界 '\b' 4.2. 贪婪和非贪婪 4 ...
- [LOJ#500]「LibreOJ β Round」ZQC的拼图
题目 点这里看题目. 分析 首先不难发现答案具有单调性,因此可以二分答案.答案上限为\(V=2m\times \max\{a_i, b_i\}\). 考虑如何去判断当前的答案.设这个答案为 ...
- Stones【中石油个人赛第十七场I】
Stones 题目链接(传送门) 来源:upc12899 题目描述 There are N stones arranged in a row. Every stone is painted white ...
- Centos中使用virtualenvwrapper
Centos中使用virtualenvwrapper python特有的一种软件环境,创建多个python环境,各个环境之间完全隔离,互不影响.它可以用来解决Python项目开发和运行过程中的依赖项和 ...