文档章节

CSS3 transition实现超酷动画效果

coko
 coko
发布于 2013/08/15 21:03
字数 2042
阅读 280
收藏 10

一、前面的感慨
以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等。但都是试试而已,知道有这么回事。今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了,半天说不出话来,这…这…unbelievable,amazing,太神奇了,太不可思议了,几行简单的CSS,如此炫酷的动画效果,flash都不及的动画效果,我真是难以表达我的心情。

下面由浅入深,使用纯CSS,一步一步实现图片墙动画效果。这里,必须要先说明一下:对于对于此transition效果,IE6,IE7,IE8浏览器可以回家过元旦节了,这里没有它们的事情,Firefox3虽然平时表现不错,这里也没有它的事情。这个效果最拿手的是chrome2浏览器,Safari4,也就是webkit家族,这里Firefox3.5勉强凑合,有盒阴影和旋转效果,但是没有动画。所以,下文陆续提供的demo页面仅适用于chrome浏览器和Safari浏览器,部分适用于Firefox3.5+,IE纯粹的观众。

二、基础练习 – 实现旋转与盒投影效果
在CSS3中,实现旋转效果需要用到transform属性中的rotate属性;实现盒阴影效果需要使用box-shadow属性。具体参见下面的示例代码。

-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
-webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px 
   rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);

上面代码部分,首先应该知道的是webkit表示webkit核心的浏览器,是其私有属性,作用于chrome和Safari浏览器,moz是Firefox浏览器的私有属性。
transform中文意思转换,含有多个属性值,其中rotate表示旋转,其他一些属性如scale-尺寸放大缩小(本文将会用到),skew表示倾斜角度,translate表移动距离。例如,本例中,rotate(10deg)表示顺时针旋转10度,如果要逆时针旋转,使用负值就可以了。
box-shadow表示盒阴影,其有四个参数,第一个参数表示水平偏移,例如2px表示投影右偏移2像素,第二个参数表示垂直偏移,2px表示投影向下偏移2像素,第三个参数表示模糊的大小,第四个参数为rgba颜色值,例如 rgba(135, 139, 144, 0.4),括号内四个值分别指代r(red),g(green),b(blue),a(opacity),这里表示透明度为40%的一种灰色。

上面代码在Safari浏览器下的表现如下:

如果您当前浏览器为Safari3.5+,或是chrome,Safari,您可以狠狠地点击这里:基础旋转投影效果demo

三、使用transition给单个图片添加悬停动画
有别于上面基础效果CSS代码,这里需要添加一个transition的样式,告诉浏览器,这里要有动画效果。先看一下此相关的CSS代码:

.pic{
    display:block; width:256px; margin:60px 0 0; padding:10px 10px 15px; text-align:center;
    background:white; border:1px solid #bfbfbf;
    -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
    -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px 
       rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -webkit-transition:all 0.5s ease-in; }
.pic:hover,.pic:focus,.pic:active{
    border-color:#9a9a9a; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); 
     transform:rotate(0deg);
}

代码部分最关键的就是:-webkit-transition:all 0.5s ease-in;目前而言,transition仅webkit核心的浏览器支持,所以此效果仅在chrome或是Safari下有。
transiton属性有这几个值:
transition-property :* //指定过渡的性质,比如transition-property:backgrond 就是只指定backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型,有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

熟悉flash显示与动画编程的应该知道,这里的过渡类型的含义与flash中缓动类型(远不及flash丰富)是一致的:
linear //线性过度
ease-in //由慢到快
ease-out //由快到慢
ease-in-out //由慢到快在到慢

额外的些知识:timing-funciton的几种过度类型都是基于cubic-bezier的某些特定数值。比如ease-in-out的类型它也可以写成cubic-bezier(0.42, 0, 0.58, 1.0)。参见这里http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag。
transition还支持CSS伪类。

所以,-webkit-transition:all 0.5s ease-in表示的意思就是所有的属性都执行过渡效果,像角度啊,投影大小,边框色或是下面要讲到的比例啦等,执行时间为0.5秒,过渡动画类型为先慢后快。

如果您当前浏览器为Safari3.5+,或是chrome,Safari,您可以狠狠地点击这里:单张图片的鼠标悬停旋转动画demo

四、多张美女图的transition旋转效果
上面讲的是一张图片的鼠标悬停旋转效果,现在我们在页面上放它个十几张图片,层叠排列,岂不是很酷。见下图:

核心的CSS代码与上面的一致,多的就是种图片的绝对定位布局了。这里不多说。

如果您当前浏览器为Safari3.5+,或是chrome,Safari,您可以狠狠地点击这里:多张图片的鼠标悬停旋转动画demo

五、单张图片的旋转拉近动画效果
这里对动画效果做了进一步的升级,更酷了。描述为:鼠标经过图片,图片不仅旋转,而且图片的投影拉长,图片比例变大,于是形成了图片从墙面上浮起来的炫酷效果。

如果您当前浏览器为Safari3.5+,或是chrome,Safari,您可以狠狠地点击这里:单张图片的旋转悬浮效果demo

核心的CSS代码如下:

.pic{
    display:block; width:256px; margin:60px 0 0; padding:10px 10px 15px; text-align:center; 
       background:white; border:1px solid #bfbfbf;
    -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
    -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px 
       rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
    -webkit-transition:all 0.5s ease-in;
}
.pic:hover,.pic:focus,.pic:active{
    border-color:#9a9a9a;
    -webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); -moz-box-shadow:15px 15px 20px 
       rgba(50, 50, 50, 0.4); box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
    -webkit-transform:rotate(0deg) scale(1.05); -moz-transform:rotate(0deg) scale(1.05); 
          transform:rotate(0deg) scale(1.05);
}

对比三和五部分的CSS代码,您会发现,这里的CSS的hover部分发生了些变化,首先增加的盒阴影样式,box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);加大了投影的偏移,以及模糊的大小,同时投影的颜色也加深了。另外就是transform:rotate(0deg) scale(1.05);增加了scale属性,scale(1.05)表示1.05倍于原来的尺寸显示。而这些变化在webkit核心的浏览器下都是动画显示的,于是就有了图片的拉伸悬浮效果。

六、最后的图片墙悬浮超酷动画
现在讲单个图片的悬浮效果应用到15个美女图片上,就有了本文最终的美女图片墙的图片旋转悬浮动画效果了。
如果您当前浏览器为Safari3.5+,或是chrome,Safari,您可以狠狠地点击这里:图片墙旋转悬浮效果demo
每张美女图片所在的a标签采用绝对定位,鼠标经过改变z-index层级使其顶层显示。有了CSS3,实现效果就是这么简单。

七、最后自己的些总结
我是很兴奋啊,不过写到这里,我的肾上腺素貌似又回到了正常水平,虽说CSS3的一些特性真是非常的好,但是,并不是很完美的说。首先,浏览器的支持,要是所有的浏览器都支持transition,那才真正的普天同庆,但不知还要等多久。即使chrome浏览器支持transform的旋转,但是,您可能注意到了,旋转图片的锯齿很明显,文字也是扭曲(Firefox下尤为明显)了。

关于transition,如果您有兴趣,可以去w3c去看一看,里面有相对比较详细的介绍:http://www.w3.org/TR/css3-transitions/

总之,CSS3中蕴含的潜力无限,等着您我挖掘探寻了……

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

本文转载自:

共有 人打赏支持
coko
粉丝 10
博文 10
码字总数 828
作品 0
成都
私信 提问
CSS3 Transitions, Transforms和Animation使用简介与应用展示

一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云,禁不住诱惑享乐去了。...

黄金林
2016/12/21
7
0
12个炫酷实用的HTML5带发光动画

在网页设计中,很多元素都可以实现发光的动画效果,比如输入框、文字、进度条等等。这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩。今天我们就要为大家分享12款炫酷实用...

fishzhang8
2017/09/25
0
0
最新的 Javascript 和 CSS 应用技巧荟萃

随着前端技术的发展,javascript和css在 网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过 的特效和动画,在今天...

gbin1
2012/07/10
4.5K
12
大爱HTML5 9款超炫HTML5最新动画源码

我们分享过很多漂亮的HTML5动画,包括CSS3菜单、HTML5 Canvas动画等。今天我们精选了9款非常不错的超炫HTML5最新动画及其源码,一起来看看。 1、HTML5可爱的404页面动画 很逗的机器人 很久以...

ruby_chen
2014/04/02
5.4K
5
8款炫酷的HTML5特效源码

HTML5的强大不仅在于可以让网页元素更加灵活多变,更在于它可以很方便的实现网页动画的特效,可以让你的网站更加富有现代化特色。今天,就给大家分享8个让人难忘的HTML5炫酷动画~ 1、HTML5 C...

牵着蜗牛去西藏
2015/02/09
4K
1

没有更多内容

加载失败,请刷新页面

加载更多

《大数据白皮书(2018年)》发布(解读版+完整版PPT)

数据观微信小编获悉,为更好促进大数据与实体经济融合,研判技术发展路径,总结管理痛点、描绘发展趋势,总结行业应用渗透路径,4月18日,在“2018大数据产业峰会”上,中国信息通信研究院(...

了凡川
21分钟前
1
0
从小白到月薪上万,一份完整的大数据路线分析出自我成长书单

大数据原理与实践 大数据分三大部分,包括:大数据基础、技术原理和创新实践。 大数据基础部分主要介绍大数据的基本概念、技术架构和大数据的应用场景; 第二部分大数据技术原理主要介绍大数...

董黎明
32分钟前
2
0
斗鱼直播确定赴美IPO 此前融资额已达70亿元

据最新消息,斗鱼直播高层人士向新京报证实,斗鱼直播确定赴美IPO(首次公开募股),此前融资额已达70亿元。 此前,多家媒体报道,由国内知名直播平台斗鱼(Douyu)已秘密提交赴美IPO文件。 ...

ThinkSNS官方帐号
34分钟前
3
0
虎牙直播在微服务改造方面的实践和总结

相比文字和图片,直播提供了人与人之间更丰富的沟通形式,其对平台稳定性的考验很大,那么倡导“以技术驱动娱乐”的虎牙直播(以下简称“虎牙”)是如何在技术上赋能娱乐,本文将为您介绍虎牙...

阿里云云栖社区
37分钟前
1
0
采用SpringBoot整合Mybatis框架插入数据时报错及解决

这两天做SpringBoot整合Mybatis项目的时候,插入时报错: 3:45:59.936 DEBUG [http-nio-8080-exec-8] o.s.w.s.m.m.a.ExceptionHandlerExceptionResolver 133 - Resolving exception from ha......

aiChuang
43分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部