版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、你所不知道的 css 负值技巧与细节写本文的起因是,一天在群里有学生说误打误撞下,用法负的outline-offset实现了加号。嗯?奇怪的我马上也动手尝试了下,到底是如何用法负的outline-offset实现加号呢?用法负值outline-offset实现加号假设我们有这样一个容易的结构:divwidth:200px;height:200px;outline:20pxsolid000;outline-offset:10px;修改outline-offset到一个合适的负值,那么在恰当的时候,outline边框就会向内缩进为一个加号。经过一番尝试,修改上述div的outline-offset
2、为-118px。divwidth:200px;height:200px;outline:20pxsolid000;outline-offset:-118px;加个动画效果,也许是这样:codependemo-用法outline实现加号很故意思,我尝试了无数不同的状况,最后总结了一个容易的逻辑,要用法负的outline-offset生成一个加号有一些容易的限制:容器得是个正方形outline边框本身的宽度不能太小outline-offset负值x的取值范围为:-(容器宽度的一半+outline宽度的一半)?以box-shadow:1px2px3px4px333为例,4个数值的含义分离是,x方向偏
3、移值、y方向偏移值、含糊半径、扩张半径。这里有一个小技巧,扩张半径可以为负值。继续,假如阴影的含糊半径,与负的扩张半径全都,那么我们将看不到任何阴影,由于生成的阴影将被包含在本来的元素之下,除非给它设定一个方向的偏移量。所以这个时候,我们给定一个方向的偏移值,即可实现单侧投影:codependemo-css单侧投影用法scale(-1)实现翻转通常,我们要实现一个元素的180°翻转,我们会用法transform:rotate(180deg),这里有个小技巧,用法transform:scale(-1)可以达到同样的效果。看个demo:cssnagativescale(-1).sc
4、aletransform:scale(1);animation:scale10sinfinitelinear;keyframesscale50%transform:scale(-1);100%transform:scale(-1);看看效果:(gif中第一行是用法了transform:rotate(180deg)的效果)codependemo-用法scale(-1)实现元素的翻转用法负letter-spacing倒序罗列文字与上面scale(-1)有异曲同工之妙的是负的letter-spacing。letter-spacing属性明确了文字的间距行为,通常而言,除了关键字normal,我们还可
5、以指定一个大小,表示文字的间距。像这样:倒序罗列文字.letter_spacingfont-size:36px;letter-spacing:0px;animation:move10sinfinite;keyframesmove40%letter-spacing:36px;80%letter-spacing:-72px;100%letter-spacing:-72px;我们设置文字的letter-spacing从0->36px->-72px,观看不同的变幻:codependemo-负letter-spacing倒序罗列文字然而,受到中英文混排或者不同字体的影响,以及倒序后的罗列方式
6、,不建议用法这种方式来倒序罗列文字。transition-delay及animation-delay的负值用法,立即开头动画我们知道,css动画及过渡提供了一个delay属性,可以延迟动画的举行。考虑下面这个动画:容易的代码也许是这样:.itemtransform:rotate(0)translate(-80px,0);.item:nth-child(1)animation:rotate3sinfinitelinear;.item:nth-child(2)animation:rotate3sinfinite1slinear;.item:nth-child(3)animation:rotate3
7、sinfinite2slinear;keyframesrotate100%transform:rotate(360deg)translate(-80px,0);假如,我们想去掉这个延迟,希翼在一进入页面的时候,3个球就是同时运动的。这个时候,只需要把正向的animation-delay改成负向的即可。.item:nth-child(1)animation:rotate3sinfinitelinear;.item:nth-child(2)animation:rotate3sinfinite-1slinear;.item:nth-child(3)animation:rotate3sinfinite
8、-2slinear;这里,有个小技巧,被设置了animation-dealy为负值的动画会立即执行,开头的位置是其动画阶段中的一个阶段。所以,动画在一开头的时刻就是下面这样:以上述动画为例,一个被定义执行3s的动画,假如animation-delay为-1s,起点相当于正常执行时,第2s(3-1)时的位置。codependemo-用法负值animation-delay提前执行动画负值margin负值margin在css中算是运用的比较多的,元素的外边距可以设置为负值。在flexbox布局规范还没流行之前,实现多行等高布局还是需要下一番功夫的。其中一种办法便是用法正padding负margin相
9、消的办法。有如下一个布局:左右两栏的内容都是不确定的,也就是高度未知。但是希翼无论左侧内容较多还是右侧内容较多,两栏的高度始终保持全都。ok,其中一种hack方法便是用法一个很大的正padding和相同的负margin相消的办法填充左右两栏:.g-left.padding-bottom:9999px;margin-bottom:-9999px;.g-right.padding-bottom:9999px;margin-bottom:-9999px;可以做到无论左右两栏高度如何变幻,高度较低的那一栏都会随着另外一栏变幻。详细的代码可以看看这里:codependemo-正padding负margi
10、n实现多列等高布局总结一下另外,还有一些大家熟知的没有单独列出来的,譬如:用法负marign实现元素的水平垂直居中用法负marign躲藏列表li首尾多余的边框用法负text-indent实现文字的躲藏用法负的z-index参加层叠上下文排序还有一些很浅显的,譬如张鑫旭大大在今年的css大会上共享的,利用负的opacity在css中实现了伪条件推断,协作css自定义属性,用法纯css实现360°的饼图效果:第五届css大会主题共享之css创意与视觉表现最后额,虽然css负值的一些用法场景确实有实用之处,但是与此同时有可能带来的是代码可读性的下降。有的时候看到这些代码不得不好好捋一捋才干缓过神来,再感叹一句,本来如此。假如有其他
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 全屋定制合同书样本电子版
- 艺术品字画购销合同范本版
- 简单版的离婚协议书
- 学校免责协议书模板锦集
- 汽车美容店转让合同范本
- 签订机械租赁合同的作用
- 合同约定至廉洁协议
- 轮车买卖的协议书范本
- 欧派定制家具合同样本
- 养鸡承包合同
- 2024届浙江省宁波市名校八年级下册数学期末综合测试试题含解析
- 2024-2029全球及中国手机摄像头马达行业市场发展分析及前景趋势与投资发展研究报告
- 供货证明范本
- (高清版)DZT 0017-2023 工程地质钻探规程
- 11.1 功(学生版)-大单元作业设计
- 创新实践组织创新成功的案例分享
- 国家职业技能鉴定电子设备装接工中级工考试题库汇总
- 餐饮部规章制度样本
- 数学与化学的关系
- 2024年高考理综试题及答案(全国新课标卷)11
- 【年法网公开赛男子单打决赛技战术对比分析4800字】
评论
0/150
提交评论