css3实践之图片轮播(Transform,Transition和Animation)
楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲。本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation。
本文需要实现效果:(请用chrome打开)
Transform
根据我的理解,transform和width、height、background一样,都是dom的属性,不同的是它是css3旗下的,比较屌,能够对原来的dom元素进行移动、缩放、转动、拉长或拉伸,跟canvas上的某些api神似,这么说来transform好像能干些js才能干的事。
transform分2D变换和3D变换,w3school中有很好的介绍和例子,具体请猛戳:CSS3 2D 转换 CSS3 3D 转换
为了方便查找,我把w3school上的截图在这里保存一份:
Transition
transition的解释是过渡,我的理解是css之间的变换,但是这个变换很屌很平滑,类似动画。举个栗子,一开始某个dom的类是classA,通过某种操作(比如被点击了)后变成了classB,如果没有transition,类之间的变换是很快的,机械般瞬间完成,但是有了transition,这便会是一个很缓和平滑的过程。
我们通过demo来讲解transition的使用方式。
写好如下的html文件:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> </style> <img src='http://hanzichi.github.io/img/img0.png' />
打开来是非常简单的一张图,加上css:
img { -webkit-transition: all 1s ease-in-out 0s; } img:hover { -webkit-transform: rotate(360deg) scale(0.5, 0.5); opacity: 0; }
效果请猛戳:transition变换 (ps:所有demo都没有做兼容 请用chrome打开)
是否很简单?demo中,你只需设定好图片(img标签)原先的属性和hover后的属性,中间的变换过程全由transition搞定!而transition加在某个元素下(demo的transition加在img标签下),仿佛设置了一个监听器,一旦该元素的属性值即将要发生变化,就会自动检查transition中的设定的属性,一旦发现相匹配,则进行平滑的过渡。
transition有4个属性,语法:transition: property duration timing-function delay 从前到后4个属性依次可理解成“过渡动画变换的属性”、“过渡花费时间”、“过渡过程的速度变化”和“过渡开始前的等待时间”(默认值:all 0 ease 0 前两个是必须的 后两个可省略)。
如果不是所有属性都要进行平滑过渡,或者各属性过渡的时间、速度等设置各有需求,可以把要过渡的属性用逗号隔开,demo可写成:
img { -webkit-transition: -webkit-transform 1s ease-in-out 0s, opacity 1s ease-in-out 1s; } img:hover { -webkit-transform: rotate(360deg) scale(0.5, 0.5); opacity: 0; }
如果非得把transition的四个属性分开来写,可以这样:
img { -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; -webkit-transition-delay: 0s; }
我把后三个属性放在一起只写了一个值(因为值一样),你也可以像property一样分开来写用逗号隔开。
这里再介绍下timing-function的取值。六大取值:(还是盗图w3cschool)
- transition中的hover
相信大家实践了transition后,对于transition到底是直接写在选择器上,还是写在选择器的hover上会表示疑惑,似乎效果一样。其实不然,如果对于一般的hover,也就是鼠标hover前后的过程是为逆过程的话,两种写法效果一致,但是如果hover前后效果不一样的话,transition需要分别加在选择器的hover前后,比如这个demo:猛戳看demo
也就是说如果hover前后需要不一样的效果,就可以分别写两个transition。比如鼠标hover时颜色渐入2s,hover后渐出5s->猛戳demo
小结:一般transition应用在dom的class变换中,可先行写好机械的变换,然后添加过渡效果。
Animation
Animation的解释是动画,加强版的transition。
如果说transition能实现某些js效果,animation就更像是js了。类似于写一个canvas特效,特效总共比如说多少时间,我们能规定在什么时候该出现什么样的场景,而各个场景间的转换则完全由css3本身负责,而keyframes好比定义了一个js方法。
主要应用在某个元素需要进行连续的n次css变换。一个简单的demo如下:animation动画
我们在@keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
- 规定动画的名称
- 规定动画的时长
demo代码:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> img { /*-webkit-animation: myfirst 5s;*/ } @-webkit-keyframes myfirst { 0% { -webkit-transform: rotate(0deg) scale(1, 1); opacity: 1; } 50% { -webkit-transform: rotate(360deg) scale(0.5, 0.5); opacity: 0.5; } 100% { -webkit-transform: rotate(0deg) scale(1, 1) translate(300px, 200px); opacity: 1; } } img { -webkit-animation: myfirst 5s linear 0s 1 alternate; /*停在结束位置*/ -webkit-animation-fill-mode: forwards; } </style> <img src='http://hanzichi.github.io/img/img0.png' />
更多请猛戳 CSS3 动画
具体应用:图片轮播
类似应用可先写好无过渡的代码,然后再在class转换之间添加transition。
该demo(图片自动轮播)和transition有关的核心代码就几行,而js只是简单的对元素的class进行赋值,动画过程全由css3完成!
img { position: absolute; -webkit-transition: all 2s ease-out; } .disappear { opacity: 0; } .show { opacity: 1; }
当img的class从show转换成disappear或者从disappear转换成show时(img标签下的class变换),就会执行transition设置的过渡动画。
另一个demo的实现也大同小异,有兴趣的可以参考源码:源码请猛戳
总结
总的来说,transform只是为dom增添一些属性,而如果搭配transition或者animation则能完成一些动画效果,我觉得实际应用较多的应该还是transition,可配合伪类或者click等事件。
楼主对以上的理解不深,如有出入,还请指出。
如需了解更多,可以参考这篇CSS3 Transitions, Transforms和Animation使用简介与应用展示
css3实践之图片轮播(Transform,Transition和Animation)的更多相关文章
- css3简单的图片轮播
<style> @-webkit-keyframes move{ %{left:0px;} %{left:-500px;} } #wrap{ width:500px; height:100 ...
- css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)
本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
- 个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...
- 使用纯css3实现图片轮播
<!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...
- 推荐一款超级漂亮的HTML5 CSS3的图片轮播器
最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...
- 天猫首页迷思之-jquery实现左侧广告牌图片轮播
本次要实现的是天猫首页每个楼层左侧的图片轮播效果.见图: 功能点有:点击右箭头向右滑动:点击左箭头向左滑动:什么都不点自动滑动. 1.实现样式.简单分析一下大概的html结构.一个大的div里面包含两 ...
随机推荐
- HTML基础(一)——一般标签、常用标签和表格
第一部分 HTML <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...
- Spring源码阅读:IOC容器的设计与实现(二)——ApplicationContext
上一主题(查看)中,了解了IOC容器的基本概念,以及BeanFactory的设计与实现方式,这里就来了解一下ApplicationContext方式的实现. ApplicationContext 在S ...
- SQL Server 2000 sp2 及更低版本不受此版本的 Windows 支持
SQL Server 2000 sp2 及更低版本不受此版本的 Windows 支持.在安装了 SQL Server 2000 之后请应用 sp3. 出现这种现象的原因在于:Windows Serve ...
- MySQL调优系列基础篇
前言 有一段时间没有写博客了,整天都在忙,上班,录制课程,恰巧最近一段时间比较清闲,打算弄弄MYSQL数据库. 关于MySQL数据库,这里就不做过多的介绍,开源.免费等特性深受各个互联网行业喜爱,尤其 ...
- 烂泥:apache虚拟主机的学习与应用
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 要配置apache的虚拟主机,我们需要分以下几步进行: 1. 检查apache虚拟主机模块 2. 开启apache虚拟主机功能 3. httpd-vho ...
- sed入门详解教程
sed是一个比较古老的,功能十分强大的用于文本处理的流编辑器,加上正则表达式的支持,可以进行大量的复杂的文本编辑操作.sed本身是一个非常复杂的工具,有专门的书籍讲解sed的具体用法,但是个人觉得没有 ...
- WIN 下的超动态菜单(一)
WIN 下的超动态菜单(一)介绍 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/ ...
- Android应用程序“.R文件”消失怎么办
其实Android自己维护这一个 public final class R类主要是跟新资源文件,这个R.java无需我们自己去修改,如果你不了解千万不要去修改它,它定义的每个资源值都是唯一的,不会和系 ...
- 制作OS X 10.9 Mavericks 安装U盘
转载:http://www.macx.cn/forum.php?mod=viewthread&tid=2094799 安装win7的话,在mac中使用bootcamp制作一个win7安装盘即可 ...
- [转]教你一招 - 如何给nopcommerce增加新闻类别模块
本文转自:http://www.nopchina.net/post/nopchina-teach-newscategory.html nopcommerce的新闻模块一直都没有新闻类别,但是很多情况下 ...