快乐CSS3之旅

Hello！everybody！对于CSS3的应用一直是前端的痛。因为国内浏览器IE、IE内核浏览器市场份额实在是太大，对于既想优雅的使用CSS3来实现复杂的页面效果，又不得不考虑国内的情况。苦逼的前端开发人员只能继续使用古老的图片来实现圆角、背景、渐变的效果。

如果你是一个具有探索性的前端攻城师，那么就用CSS3来实现吧！既能锻炼CSS3新的属性，同时对自己的技术不断提高，帮助CSS3应用的推广；也能够实现IE系列的兼容。不过这个过程很痛苦。你得和PM一顿解释为什么这样实现，又得折腾更多的代码！这太苦逼了！可是我们是一群经得起的前端攻城师！！ 哈哈~！

对了！本文的一些实例是我做项目中运用到的！主要针对Chrome内核制作开发。故我很幸福哦….而且很是兴奋兴奋滴说！

CSS3 Transition的应用

语法：

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]。

取值：

[ transition-property ]：检索或设置对象中的参与过渡的属性

[ transition-duration ]：检索或设置对象过渡的持续时间

[ transition-timing-function ]：检索或设置对象中过渡的动画类型

[ transition-delay ]：检索或设置对象延迟过渡的时间

复合属性。检索或设置对象变换时的过渡。

PS:摘自CSS参考手册

想更多的了解，去看手册吧！这是最好学习的地方哦！

好啦~我们来看个运用实例吧！

首先，看到这个设计图稿时，可能一些人，这个有什么地方可用到transition？童鞋！看到那个红框向上的箭头么？这个是要有交互效果滴！

即:滑进时，图片向上走，显示右边图片的所展示的部分。

嗯，现在看代码了哦~！

这是结构代码

CSS3主要代码：

.ext-block { position:relative; top:0; margin-top:0; transition:0.2s linear 0.2s; -webkit-transition:margin-top 0.25s ease-in-out 0.1s;/*针对webkit内核CSS3的的私有属性,chorme在transition上还属于实验性。*/}.ext-block:hover { margin-top:-95px; }

其中触发的动作就是.ext-block:hover { top:-95px;}

这两句就能实现鼠标滑入时，图片上滑，然后显示其他的。这个省了好多js吧！哈哈！可能有些人说：语法是四个参数，为什么你就写了三个？这个…看手册吧！

标签： CSS3 CSS3教程 CSS3.0 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。