• 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);//这表示动画的速度
    ;
  • 相关阅读:
    python面试题
    面试总结
    552 Student Attendance Record II 学生出勤记录 II
    551 Student Attendance Record I 学生出勤纪录 I
    547 Friend Circles 朋友圈
    546 Remove Boxes 移除盒子
    543 Diameter of Binary Tree 二叉树的直径
    542 01 Matrix 01 矩阵
    3.1 特性
    2.6 datetime 模块
  • 原文地址:https://www.cnblogs.com/yyumeng/p/8488105.html
Copyright © 2020-2023  润新知