• css3核心模块


    transition 过渡动画 transform 变型属性 animation 帧动画

    transition-property 过渡属性 all|[attr]

    transition-duration 过渡时间

    transition-delay 延迟时间

    transition-timing-function 运动类型 ease:(逐渐变慢)默认值 linear:(匀速) ease-in:(加速) ease-out:(减速) ease-in-out:(先加速后减速) cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 ) http://cubic-bezier.com/

    2D转换:

    transform rotate() 旋转函数 deg 度数 Transform-origin 旋转的基点

    skew() 倾斜函数 skewX() skewY()

    scale() 缩放函数 默认值是1 scaleX() scaleY()

    translate() 位移函数 translateX() translateY()

    animate声明关键帧:

    关键帧——@keyframes 类似于flash 定义动画在每个阶段的样式,即帧动画 关键帧的时间单位 数字:0%、25%、100%等(设置某个时间段内的任意时间点的样式) 字符:from(0%)、to(100%)

    格式 @keyframes 动画名称 { 动画状态 }

    必要属性

    animation-name 动画名称(关键帧名称)

    animation-duration 动画执行时间

    可选属性

    animation-timing-function linear 匀速。 ease 缓冲。 ease-in 由慢到快。 ease-out 由快到慢。 ease-in-out 由慢到快再到慢。

    cubic-bezier(number, number, number, number): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

    可选属性

    animation-delay 动画延迟

    animation-iteration-count 重复次数

    animation-direction 动画运行的方向 normal | reverse | alternate | alternate-reverse animation-play-state 动画状态 running | paused animation-fill-mode 动画结束后的状态 none | forwards| backwards | both

    3D转换

    transform-style : flat | preserve-3d (3D空间展示) perspective 透视效果 transform:perspective(800px) 直接作用在子元素上 perspective-origin 透视点位置 transform 新增函数 translate3d( tx , ty, tz ) translateX() translateY() translateZ() rotate3d( rx , ry , rz,a) rotateX() rotateY() rotateZ() scale3d( sx , sy , sz) scaleX() scaleY() scaleZ()

  • 相关阅读:
    Android中的5种数据存储方式
    Android Service
    Android BroadcastReceiver
    Android Intent
    Android Fragment
    Android 教学实验计划1
    【Android教学用例程序】计算器
    Android UI 基础知识
    Android 控件
    Android 计算器布局测试2
  • 原文地址:https://www.cnblogs.com/Lia-633/p/9811174.html
Copyright © 2020-2023  润新知