zoukankan      html  css  js  c++  java
  • css3过渡transition。

    css3过渡是元素从一种样式逐渐改变为另一种的效果。

    必须有两项内容:

    1、规定您希望把效果添加到哪个css属性上

    2、规定效果的时长

    如果时长未规定,则不会有过渡效果,因为默认为0.

    div
    {
      transition: width 2s;
      -moz-transition: width 2s;	/* Firefox 4 */
      -webkit-transition: width 2s;	/* Safari 和 Chrome */
      -o-transition: width 2s;	/* Opera */
    }
    div:hover{
      300px;
    }
    如果需要向多个样式添加过渡效果,请添加多个属性,由逗号隔开:
    div
    {
      transition: width 2s, height 2s, transform 2s;
      -moz-transition: width 2s, height 2s, -moz-transform 2s;
      -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
      -o-transition: width 2s, height 2s,-o-transform 2s;
    }
    div:hover{
      300px;
      height:300px;
      transform:rotate(180reg);
      -o-transform:rotate(180reg);
      -webkit-transform:rotate(180reg);
      -moz-transform:rotate(180reg);
    }
    以上两个例子,在鼠标放到元素上之后就会显示动画效果。
    transition-timing-function:
    linear|ease|ease-in|ease-out|ease-in-out|cubic-
    bezier(n,n,n,n);//这表示动画的速度
    ;
  • 相关阅读:
    Windows7共享设置
    13-运算符
    13-数据类型转换
    06-移动web之flex布局
    09-sass
    08-less预处理器
    移动端必须掌握知识点
    11-JS变量
    10-响应式
    07-rem
  • 原文地址:https://www.cnblogs.com/yyumeng/p/8488105.html
Copyright © 2011-2022 走看看