css3实践之图片轮播(Transform,Transition和Animation)

原文:css3实践之图片轮播(Transform,Transition和Animation)

  楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲。本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation。

  本文需要实现效果:(请用chrome打开

  1. 图片轮播
  2. 图片自动轮播

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应用在dom的class变换中,可先行写好机械的变换,然后添加过渡效果。

Animation

  Animation的解释是动画,加强版的transition。

  如果说transition能实现某些js效果,animation就更像是js了。类似于写一个canvas特效,特效总共比如说多少时间,我们能规定在什么时候该出现什么样的场景,而各个场景间的转换则完全由css3本身负责,而keyframes好比定义了一个js方法。

  主要应用在某个元素需要进行连续的n次css变换。一个简单的demo如下:animation动画

  我们在@keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。

  通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

  1. 规定动画的名称
  2. 规定动画的时长

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使用简介与应用展示

时间: 2024-10-15 08:08:21

css3实践之图片轮播(Transform,Transition和Animation)的相关文章

css3简单的图片轮播

<style> @-webkit-keyframes move{ 0%{left:0px;} 100%{left:-500px;} } #wrap{ width:500px; height:100px; border:1px solid #000000; position:relative; margin:100px auto; overflow:hidden; } /*定位的时候可以不写px*/ #list{ position:absolute; left:0; padding:0px; p

css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)

本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(css3版 chrome only) 3D标签云(js版 chrome only) 前文回顾 在前面的文章css3实践之图片轮播(Transform,Transition和Animation)中我们简单地了解了css3旗下的transform.transition以及animation.回顾一下,tr

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

使用纯css3实现图片轮播

<!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> <meta charset="utf-8" /> <meta name="description" content="飛天网事,WEB前端开发,纯css3代码图片轮播,HTML5+CSS3精彩案例" /> <meta name=

天猫首页迷思之-jquery实现左侧广告牌图片轮播

本次要实现的是天猫首页每个楼层左侧的图片轮播效果.见图: 功能点有:点击右箭头向右滑动:点击左箭头向左滑动:什么都不点自动滑动. 1.实现样式.简单分析一下大概的html结构.一个大的div里面包含两个箭头以及轮播的容器.图片是由三个p标签组成,每个p标签中包含3个图片.css见github 1 <div class="floor-show-middle"> 2 <a class="floor-show-middle-arrow arrow-left&quo

图片轮播--高效版

作为一个专业的前端(笑),图片轮播插件应该是一个很容易实现的功能插件 随着境界的提高,我们编写插件越来越注重它的效率.于是,鉴于工作的关系,我仿照了一下淘宝的插件设计,写了一款我个人比较满意的图片轮播插件(淘宝的插件有bug!) 事先声明,这个插件是基于angular的directive的(换成其他编写形式同理) 特点: translateX + transition 制作动画(css3处理动画的速度比较高) 事件代理 字符串形式生成DOM streamModule.directive('pic

面向对象编程---图片轮播

今天复习了一下面向对象编程,下面是我的效果图 看着这个图片你会觉得这没有什么,那么上代码: html部分: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 ul,ol,li{padding:0;margin:0;li

一分钟搞定AlloyTouch图片轮播

一分钟搞定AlloyTouch图片轮播 轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹.除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何属性的运动.所以AlloyTouch制作各种各样的轮播组件还是得心应手. 第一种轮播图如上图所示.下面开始实现的过程. 第0秒 <div id="carousel-container&quo

Android事件分发学习应用-图片轮播实现

前一篇写到Android事件分发机制学习笔记,下面我们通过一个实例的应用来实践理解下Android事件分发的机制.我们这里来实现一个图片的轮播功能,最后顺便实现下图片的自动轮播. 我们的图片轮播是封装在一个ViewGroup里,当我们进行横向滑动的时候,我们需要阻止事件从ViewGroup往子控件分发,ViewGroup来消费我们当前的滑动图片何去何从.下面我们贴出我们的封装的ViewGroup的代码实现如下: public class ImageSwitcher extends ViewGro