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);//这表示动画的速度
    ;
  • 相关阅读:
    XML文件详解以及解析
    Delphi 泛型详解
    Delphi 修改本地日期和时间
    java -> this关键字
    java ->super关键字
    Java -> 构造器(构造方法)
    java -> 方法的重载
    java面向对象->多态
    Java面向对象->接口
    Java面向对象->抽象类
  • 原文地址:https://www.cnblogs.com/yyumeng/p/8488105.html
Copyright © 2011-2022 走看看