CSS3的变形与过渡样式

作为最新版的 CSS , CSS3 就像传说中的一样,的确很神奇,配合 HTML5 后可以直接忽略 flash 了!不过杯具的是只有 chrome 、 Firefox 、 safari 等现代浏览器部分支持 CSS3 ,因此做正式站点的话还不能大规模的使用。但是在网站的某些部分使用一些CSS3却能很好的增强网页的画面效果,比如 Melody 的评论者头像就使用了 CSS3 的图片悬停动画,在不支持 CSS3 的浏览器中并没有影响评论部分的样式,却能带给使用支持 CSS3 浏览器的读者很大的用户体验,这无疑是加强网页效果的很好选择。下面详细介绍一下 CSS3 的变形与过渡样式。

一.变形——transform

兼容浏览器:Firefox 3.5+、Chrome 2.0+、Safari 3.1+、Opera 11.01+、IE9

1.旋转

旋转图片,单位deg,为“度”的意思

-moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg);

旋转

2.放大缩小

按比例放大缩小,如 “1.6” 为放大 1.6 倍,若 “-1.6” 则缩小 1.6 倍
-webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6);

放大缩小

除了 rotate() , scale() 外还有 skew() , translate() 属性 ,另外分别还有横向、竖向之分,如:rotatex()、rotatey()。 有兴趣折腾的童鞋可以参考 CSS 参考手册

二.变形原点——transform-origin

设置或检索对象以某个原点进行转换,即该对象围绕着一个点变形或旋转,该样式只有在设置了 transform 样式时起作用

兼容浏览器:Firefox 3.5+、Chrome 2.0+、Safari 3.1+、Opera 11.01+、IE9+

例子1: 对象围绕左下角一点旋转20度(配合“一.变形——1.旋转中的rotate属性”)
-moz-transform-origin: 0 100%; -webkit-transform-origin: 0 100%; -o-transform-origin: 0 100%; -ms-transform-origin: 0 100%;

对象围绕左下角一点旋转20度

另外还可以使用数值作为坐标值。例子2: 对象围绕右下角一点旋转20度(配合“一.变形——1.旋转中的rotate属性”)
-moz-transform-origin: 128px 128px; -webkit-transform-origin: 128px 128px; -o-transform-origin: 128px 128px; -ms-transform-origin: 128px 128px;

对象围绕右下角一点旋转20度

三.过渡——transition

很神的CSS样式,可以用来做出自定义的 CSS 动画。

兼容浏览器:Chrome 2.0+、Safari 3.1+、Firefox 4.0+、Opera 11.01+

先来一个例子:transition: background-color .5s ease-in .1s;

具体写法(假设 a 标签的 class 为 tran )

a.tran {display: block; margin-left: 30px; width: 150px; height: 150px; background-color: #EEE; -webkit-transition: background-color .5s ease-in .1s; -moz-transition: background-color .5s ease-in .1s; -o-transition: background-color .5s ease-in .1s; }

a.tran:hover {background-color: #FF9900; }

属性从左到右分别设置动画样式,动画持续时间,过渡方式,过渡时间,也可以分别使用

transition-property: background-color;

transition-duration: .5s;

transition-timing-function: ease-in;

transition-delay: .1s;

过渡效果

 

看完了上面的效果后,大家应该对 CSS3 的变形与过渡样式有所了解了,这无疑是两种具有良好用户体验的效果,用在图片上效果更加明显!喜欢 CSS3 的童鞋果断试试。

本文由 Kayo Lee 发表,本文链接:https://kayosite.com/about-css3-transform-transition.html

评论列表

  • 评论者头像
    回复

    CSS3 和 HTML5 组合绝配

  • 评论者头像
    回复

    这类用的少,常用的是圆角和阴影……再等等

  • 评论者头像
    回复

    这个都试了试?
    很喜欢的说
    估计有些会被很快用到的 不止是我
    嘿嘿 现在这年头 会动的才是健康的

  • 评论者头像
    回复

    过渡效果:有点开始泛滥了

    • 评论者头像
      回复

      @无冷 嗯,这类效果的确不能用太多,稍作修饰便刚好!

  • 评论者头像
    回复

    這個我感興趣。 哈哈~~
    雖然我的 CSS學的不倫不類。 不過這個很喜歡。 哈哈~
    不懂學姐請教你哈。

    • 评论者头像
      回复

      @Leyar 这类CSS动画使用起来并不困难,还有学弟耐心指导,学姐包学会!

      • 评论者头像
        回复

        @Kayo 那多謝學弟的耐心指導了。 哈哈。
        準備考試了吧 ?這週末四級噢 ~ 
        對了,還有,我的明信片收到了不?

        • 评论者头像
          回复

          @Leyar 嗯,准备考试了,这个月有两科!四级的话努力中,不过。。。。你懂的!
          学姐的明信片一直没有收到,昨天去学校论坛泡泡,才知道原来要写班级姓名才会送到班级邮箱,没有写的话就会分发到收发室,学弟打算下午到收发室,呜呜,传说中的收发室,离宿舍的路程可是按公里算的!

  • 评论者头像
    回复

    效果不错,CSS3 + HTML5 会很火的· :lol:

    • 评论者头像
      回复

      @gleaner 虽然CSS3 + HTML5成主流的这一天会很远,但还是会来的 :mrgreen:

  • 评论者头像
    回复

    Nice. :wink:

  • 评论者头像
    回复

    學習了 :mrgreen:

  • 评论者头像
    回复

    CSS3在IE下那就是个悲剧了。坑爹的IE。

    • 评论者头像
      回复

      @Demon IE本身就是个超级大杯具 :twisted:
      每次说到万恶的IE就特激动了! :-P

      • 评论者头像
        回复

        @Kayo IE。现在一想到要做兼容我就不淡定了。

  • 评论者头像
    回复

    大屌了…等我考完試..弄弄這個 :idea:

    • 评论者头像
      回复

      @kkStx email打錯了..-,-lll

    • 评论者头像
      回复

      @kkStx 嘻嘻,看来很多人都在为考试忙碌了,话说很快我也考第一科了!
      CSS3的效果用在修饰网站上还真是不错的,用户体验和外观都可以得到提升!

  • 评论者头像
    回复

    很喜欢这个过渡效果。

  • 评论者头像
    回复

    :wink: 不错,收了,以备后用!

  • 评论者头像
    回复

    呵呵,学习,谢谢朋友分享 :mrgreen:

  • 评论者头像
    回复

    俺得再学学才行!

  • 评论者头像
    回复

    博主好久没更新了

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail