李东的技术博客

文章内容Content

CSS入门级装逼利器transition

2016/06/19 460 ℃ 2 条

by LiDong from https://www.lidongtech.com/css-transition.html
本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处。如果只是引流,请随意~

据传说有研究表明凝视美女能增加寿命、放松心情、缓解压力等等好处。为啥我见了美女只会血压升高、情绪激动?难道你们所说的美女图和我理解的美女图我们不在一个频道?还是我太邪恶了?哈哈,随便搜索到一只EMT美女,放出来缓解下情绪,会更有利于集中精神来装逼。废话不多说,上图……

EMT

EMT

背影杀……好吧先不管她了,开始说今天的主题吧。CSS中有好多属性可以显得自己逼格很高,我大致介绍下:初级的装逼利器有box-shadow\text-shadowtransition、简写规则等等;中级装逼利器animation、属性选择器、伪类等等;高级装逼利器有CSS变量、正则表达式、transform等等。注意!这个标准不是单纯靠难度来划分的。

先从入门的初级开始,先把鼠标放到下面的色块上然后再把鼠标挪开,可以直观的感受一下(手机党请用手点一下色块然后在其他空白点一下就等于是鼠标放上去再挪开了)

喜欢我就点我吧!

是不是觉得自己的逼格瞬间高了起来?动画耶~怎么做到的呢,这就是今天要说的入门级的装逼利器transition属性。这是一个CSS3中新增的属性,从单词字面意思理解它的意思是过渡,它的定义是允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。尝试完demo,了解完定义,是不是觉得谁用谁闪亮啊,平滑的动画效果,能让交互变得更细腻亲和。

那画面太美我不敢看
transition在CSS3中算是比较强悍的属性了,当然还有其他更牛更强大的属性,有机会我专门写文章说明。今天只说它,需要注意的是Internet Explorer 9 以及更早版本的浏览器不支持transition属性。Safari需要前缀-webkit-transition属性。其他的浏览器全部支持。transitiontransition-propertytransition-durationtransition-timing-functiontransition-delay这四个属性的简写属性。简写的规则是

transition: property duration timing-function delay;

逐个来介绍,先来说transition-property。它是设置已发生了变化的CSS属性的属性名,有点绕嘴。简单解释下就会了解。比如想要让高度height的变化有过渡效果,就写transition:height 1s;。前提是height发生了变化,例如200px→300px。如果设置了没有变化的属性就不会有任何效果渲染,例如height:200px→200px

transition-duration是设置完成过渡需要多少时间,单位是秒s或毫秒ms。需要注意的是这货的默认是,也就是说不设置它的话,过渡根本就不可能显示。这也是我上一段文字中transition:height 1s;会写上1s的原因,重要的地方提醒自己要牢记。小tips:1s=1000ms.

transition-duration过渡效果的速度曲线,它的存在让过渡效果出现了平滑感。这货的值有很多,贴出来看看transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);。具体每个值的作用,我列了个表格:

描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 默认值;规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay属性是规定过渡何时开始,单位是秒s或毫秒ms。这个很好理解,比如设置了transition-delay:1.5s就是过渡动画1.5S之后开始。拿页面上的DEMO来说就是如果我设置了这个属性和值,那么你的鼠标移动上去后1.5s后才会出现过渡效果。小tips:CSS中整数位是0小数位非零的时候整数位可以不写,例如0.5S可以写成.5s

如果transition需要控制的属性有多个,就需要用半角的英文逗号,将多个属性隔开。

关于transition的知识点基本都已经都在上面了。学习的目的是应用,应用的好就会很惊艳,应用的的不好就会很狗shi,不应用的话知识点就会被慢慢遗忘。关键点在于如何应用……回顾定义我们了解到,能和这货最频繁配合的就是:hover和JS了。自身能力有限,并且本篇又是基础类的介绍。我就不整那些看上去高大上的让人费解的东西了。简单的效果有时候最能提现出很惊艳的效果。

装逼开始

用html5中的<nav>标签来做导航会让我们的代码更具备语义。搜索引擎的spider理解我们的代码也会更容易,也会让我们后期对代码的维护工作更容易。对WAI-ARIA无障碍网页应用也会支持的更好。既然有这么多好处,我们就要用一用了。一个简单的导航:

直接上图说结果……

普通nav导航示例

再之后的工作就是给<a>添加:hover伪类样式。这样三搞两不搞的一个简单的导航就出现在眼前。不过这样的效果是无法装逼的,我们还需要transition这个利器来提升逼格,让我们快捷便利的进入装逼模式。添加transition之后的代码样式如下:(高亮部分是新添代码!好吧其实高亮效果不是很明显。)

别说你看不懂,文章开篇已经把参数的意思介绍的很清楚了。看看完成之后的样子吧,整体效果就是下面的样子,可以用鼠标在下面的导航demo上面移动几次尝试下,是不是比没有加transition的效果要炫的很多?

不要纠结文字的颜色和效果,因为我懒的去解决CSS继承的问题,这些全都是小case,我们主要是看原理。如果说真的要想看没被“污染”的效果或者很纠结transition到底要放到<a>里面还是应该放到伪类:hover里面,我写了一个DEMO作为展示和对比,想看就看>>>猛戳这儿<<<

本文到这里全部就结束了~
.
.
.
.
.
开什么玩笑,不可能!虽然是初级装逼利器,但是初级也分低档中档高档好不好~下面就开启中级装逼模式~让装逼亮瞎别人的氪金狗眼吧!

开启中级装逼模式

想让画面更炫更有设计感,单纯的transition已经满足不了,必须配合使用其他技术才能实现。当icon fonts技术和transition碰撞会发生什么?

举个例子最能说明问题,利用icon fonts技术的fontawesome框架,来和transition配合。代码还是上面的代码,但是引入了fontawesome的图标。下面就是示例,可以用鼠标移动上去看看……

哦吼~逼格又提升了一个档次!觉得自己帅的不要不要的。嘚瑟啊~fontawesome的图标都是矢量图,也就是说可以理论上可以无限放大,但是不会失真。而且引用方便……真的是很方便。不过客户的需求总是千变万化、奇形怪状的。若是fontawesome没有自己要用的图标怎么办?其实到达这种装逼境界的人来说这都不是个问题,解决方案很简单——自己做图标,利用CSS雪碧技术(CSS Sprite)。嗯这是不错的解决方案,很多人都在用,包括我在相当长一段时间内也是在用这个技巧。

制作的图标先不说质量和设计问题,首先要解决的是颜色的变化,你会说做几套颜色不同的图片就行了。嗯,以前包括现在还是有不少人是用这个解决方案。例如这面这个css雪碧图↓↓↓↓
CSS雪碧图

很是壮观不是么,看起来应该是最优的解决方案了,我们都知道任何方案都有自己的缺点和短板,主要是看具体使用环境是什么。那么这种“雪碧图”的解决方案的缺点显而易见的有两点:1,是图片容量变大,影响页面加载速度。2,硬性转换而非过渡线性转换,失去了平滑感交互体验下降。

嘿嘿~其实吧这两个缺点给屏蔽掉,就行了。总要有有个具体的方法技巧既能使图片不变大,而且转换还是平滑过渡。我想聪明的你已经想的到了——就是把图片背景换成和网页背景一致的颜色,把图标镂空,然后用transition改变图片父元素背景色就行了~哈哈,这个技术我给起名叫“图标镂空背景色过渡技术”。很巧妙不是么?——这才是真正初级装逼利器的中级技术水平。不过这不是我的独创,我也没这智商。网络上有大神早就把思路技巧给写出来了,我说过的多查资料多查文档才能无往不胜。

下面给例子,把鼠标移动上去感受下。完全可以考虑成这是一个图标的样子,因为我的页面有背景花纹,所以图片我没法处理成背景色。将就看吧,原理才是最主要的。颜色很丑,主要原因是想让颜色对比强烈一些,例子也就容易看一些。

图标镂空背景色过渡技术

雪碧技术又可以焕发光彩了,这些自制的图标也能享受到过渡带来的好处了。不过这玩意也有缺点,因为是在需要显示颜色的地方镂空,那么背景色就不能用透明来处理了,必须要和应用这项技术的页面展示区域背景色保持一致。兼容性和扩撒性就强差人意了,从我的页面有背景花纹的情况来看这种技术的短板就显露出来了。

根据尿性,有初级中级,就会高级……没错!高级装逼模式即将开启!!!

极限装逼模式

高级装逼模式就是JS、jQuery和transition配合,哈哈具体怎么配合,我也不清楚因为在需要动画的时候我一直都是用jQuery的animate()方法。这玩意儿可比transition还要爽。我干嘛还要用transition,虽然有时候transition用起来要简便很多,可我最多也是用到“图标镂空背景色过渡技术”。被我忽悠了吧!哈哈哈哈哈哈哈哈哈哈哈。也许有的场景可能会需要JjQuery配合使用transition使用。

另外transitiontransform一起使用的话,稍微加上一点JS代码,就已经能做到非常非常吊炸天的效果了,满足寻常需求了那根本就不是个事……(感觉写了好久,眼睛疼!就到这里吧,休息……休息一会!)

突然想起来transition并不能对所有的属性变化都有作用,它是有范围的……如果是不支持的属性的话是没有效果的。copy个表过来吧,原文是英文,我顺手翻译了一下,不对的地方将就看吧!别讲究了~主要是为了方便查询使用。下面就是transition能起作用的CSS属性。

属性名 作用
background-color 背景色
background-position 背景图片定位
border-bottom-color 下边框颜色
border-bottom-width 下边框宽度
border-left-color 左边框颜色
border-left-width 左边框宽度
border-right-color 右边框颜色
border-right-width 右边框宽度
border-spacing 相邻单元格的边框间的距离(仅用于“边框分离”模式)
border-top-color 上边框颜色
border-top-width 上边框宽度
bottom 定位元素下外边距边界与其包含块下边界之间的偏移
clip 剪裁绝对定位元素
color 文本的颜色
font-size 字体的尺寸
font-weight 文本的粗细
height 元素的高度
left 定位元素左外边距边界与其包含块左边界之间的偏移
letter-spacing 字符间距
line-height 行高
margin-bottom 下外边距
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
max-height 最大高度
max-width 最大宽度
min-height 最小高度
min-width 最小宽度
opacity 元素的不透明级别
outline-color 元素周围的轮廓线颜色
outline-width 元素周围的轮廓线宽度
padding-bottom 下填充距
padding-left 左填充距
padding-right 右填充距
padding-top 上填充距
right 定位元素右外边距边界与其包含块右边界之间的偏移
text-indent 首行文本的缩进
text-shadow 文本阴影
top 定位元素上外边距边界与其包含块上边界之间的偏移
vertical-align 垂直对齐方式
visibility 元素是否可见(隐藏元素依然占据空间)
width 元素宽度
word-spacing 字间隔
z-index 堆叠顺序,值越大越在前。

万法不离其宗,掌握了原理,了解了思路。加上一点想象力,这样才会在任何情况下保证自己的创意源源不断,才能学以致用、知行合一。这才是学习知识最好的实践!

卖萌加嘚瑟

(报告完毕!)
本文标签:标签:, , ,

稍微评论一下

  • 七匹狼和羊    

    很不错啊,以前我知道有两个参数,其他的两个参数很少用到,慢慢的都不知道是什么意思了。看了一遍,懂了~

    • 李东    

      @七匹狼和羊 技术细节积累到一定程度再去了解原理,积累起来会很快。