css实现圆球旋像水波波动_这49个CSS知识点你未必会知道
本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜)。
鉴于时不时有童鞋翻我以前的沸点,因此,本文收集了个人目前发过的所有CSS知识点动图,以便阅读。
需要说明的是,顺序仍是按当时发布顺序罗列的,还没有系统的总结,多多包涵。
另外这里,老姚谢谢各位一如既往的支持。
01.【负边距】 负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似
02.【shape-outside】❤不要自以为是了。你以为自己是方的,在别人眼里你却是圆的
03.【BFC应用】 BFC应用之阻止外边距合并(margin collapsing)
04.【BFC应用】 BFC应用之消除浮动的影响
05.【flex不为人知的特性之一】 flex布局下margin:auto的神奇用法
06.【flex不为人知的特性之二】 flex布局,当flex-grow之和小于1时,只能按比例分配部分剩余空间,而不是全部
07.【input的宽度】 并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,其默认宽度取决于size特性的值
08.【定位特性】 绝对定位和固定定位时,同时设置 left 和 right 等同于隐式地设置宽度
09.【层叠上下文】 层叠上下文:小辈就是小辈,再厉害也只是个小辈
10.【粘性定位】 position:sticky,粘性定位要起作用,需要设置最后滞留位置。chrome有bug,firefox完美
11.【相邻兄弟选择器】 相邻兄弟选择器之常用场景
12.【模态框】 要使模态框背景透明,用rgba是一种简单方式
13.【三角形】 css绘制三角形的原理
14.【table布局】 display:table实现多列等高布局
15.【颜色对比度】❣蓝底红字,由于颜色对比度比较低,故而看不清,因此不是好的配色方案
16.【定宽高比】♥css实现定宽高比的原理:padding的百分比是相对于其包含块的宽度,而不是高度
17.【动画方向】 动画方向可以选择alternate,去回交替进行
18.【线性渐变应用】 css绘制彩带的原理
19.【隐藏文本】 隐藏文字内容的两种办法
20.【居中】 实现居中的一种简单方式
21.【角向渐变】 新的渐变:角向渐变。可以用来实现饼图
22.【背景位置百分比】 background-position百分比的正确理解方式:图片自身的百分比位置与容器同样的百分比位置重合
23.【背景重复新值】 background-repeat新属性值:round和space。前者表示凑个整,后者表示留点缝
24.【背景附着】 background-attachment指定背景如何附着在容器上,注意其属性值local和fixed的使用
25.【动画延时】 动画添加延迟时间可以使步调不一致
26.【outline使用】 可以使用outline来描边,不占地方,它甚至可以在里面
27【背景定位】 当固定背景不随元素滚动时,背景定位是相对于视口的
28【tab-size】 浏览器默认显示tab为8个空格,tab-size可以指定空格长度
29【动画暂停】 CSS动画其实是可以暂停的
30【object-fit】 图片在指定尺寸后,可以设置object-fit为contain或cover保持比例
31【鼠标状态】 按钮禁用时,不要忘了设置鼠标状态
32【背景虚化】 使用CSS滤镜实现背景虚化
33【fill-available】 设置宽度为fill-available,可以使inline-block像block那样填充整个空间
34【fit-content】 设置宽度为fit-content,可以使block像inline-block那样实现收缩宽度包裹内容的效果
35【自定义属性】 CSS自定义属性的简单使用
36【min-content/max-content】 可以设置宽度为min-content和max-content,前者让内容尽可能地收缩,后者让内容尽可能地展开
37【进度条】 使用渐变,一个div实现进度条37【进度条】 使用渐变,一个div实现进度条
38【打印】 可以在打印网页时,设置page相关属性。比如page-break-before属性来表示是否需要另起新页
39【逐帧动画】 利用CSS精灵实现逐帧动画
40【resize】 普通元素也可以像textarea那样resize
41【面包屑】 使用before伪元素实现面包屑
42【sticky footer】 使用grid布局实现sticky footer
43【动画填充状态】 CSS可以设置动画开始前和结束时所保持的状态
44【动画负延迟】 CSS动画可以设置延迟时间为负数,表示动画仿佛开始前就已经运行过了那么长时间
45【过渡】 爱的魔力转圈圈
46【动画案例】 水波效果原理
47【动画案例】 CSS弹球动画效果的原理
48【outline】 outline属性的妙用
49【grid】 火狐浏览器grid布局检测器
希望有所帮助。
原作者:老姚
原出处:掘金
原文链接:https://juejin.im/post/5d3eca78e51d4561cb5dde12
css实现圆球旋像水波波动_这49个CSS知识点你未必会知道相关推荐
- css实现圆球旋像水波波动_手机拍屏幕烦人的“水波纹”小米10靠它给解决掉了...
相信大家日常用手机拍电视.电脑屏幕,都遇到过"水波纹"(频闪条纹)的现象,十分恼人.那么,"水波纹"到底是啥?它是怎么出现的? 今日,小米官方发文进行了科普,并 ...
- HTML5期末大作业:网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食 ...
- 传智播客_急先锋_html、css、js_郝强勇老师
传智播客_急先锋_html.css.js_郝强勇老师 我的GitHub地址:https://github.com/heizemingjun 我的博客园地址:http://www.cnblogs.com ...
- HTML5+CSS大作业——彭于晏明星(15页) _网页设计期末作业
HTML5+CSS大作业--彭于晏明星(15页) _网页设计期末作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明 ...
- HTML5期末大作业_影视网站设计——_指环王:护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:影视网站设计--"指环王:护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 常 ...
- HTML5期末大作业:影视网站设计——“指环王:护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:影视网站设计--"指环王:护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 常 ...
- 用虎克定理来近似模拟水波波动效果
水波演示程序: ScreenShot 这个水波模拟程序和其它常见的算法不太一样.这是用虎克定理来近似模拟水波波动的.具体的算法如下. 我们知道,当水面是平静的是时候.也就是说水面各点处于平衡位置时候. ...
- HTML5期末大作业:甜品店网站设计——美食甜品店铺加盟企业(1页) HTML+CSS+JavaScript web期末作业设计网页_美食网页设计作业成品
HTML5期末大作业:甜品店网站设计--美食甜品店铺加盟企业(1页) HTML+CSS+JavaScript web期末作业设计网页_美食网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司 ...
- css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言 之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
- css 计算属性的应用_如何使用一点CSS Grid魔术设计计算器应用
css 计算属性的应用 by Deepika Gunda 由Deepika Gunda 如何使用一点CSS Grid魔术设计计算器应用 (How to use a little CSS Grid ma ...
最新文章
- JVM内存管理及GC机制
- idea启动webservice_Intellij Idea 之 WebService客户端测试
- 【CyberSecurityLearning 49】PHP与MySQL进行交互
- SQL SERVER 2005无法远程连接的问题
- GoldenGate学习笔记(11)_常用参数
- 滚动条组件 http://www.w3cfuns.com/notes/15098/96195b77bdbcb601590f67f971770bb8.html
- u-boot工作流程
- [Audio processing] Harmonic change detection function (HCDF)
- ES6 迭代器与生成器(非常详细、容易理解)
- vuex从安装到使用
- spark DataSet与DataFrame的区别
- 11.scrapy框架持久化存储
- OpenCL(matmpy)
- 关于word中如何生成自动目录以及页码编排
- 【idea配置】idea右下角不显示版本分支
- 游戏建模资料大放送,3DMX+MAYA+ZBrush集教程,20G教学视频
- 职称计算机考试常用的命令,Visual FoxPro常用命令分类表
- P2E游戏+保护濒危动物是否值得一玩,链游Pettoverse全面分析
- Simulink方波脉冲产生模块Pulse Generator详解
- java实现word转换pdf并批量生成水印