zoukankan      html  css  js  c++  java
  • CSS变形

    css3 变形/变换

    相关属性

    • transform
    • transform-origin
    • transform-style:flat/preserve-3d
    • perspective: 长度单位
    • perspective-origin观察者的位置
    • backface-visibialbe:visible/hidden

    变形方法 transform-function

    • 2d
    • translate() 位移(像素/百分号)
    • translatex()
    • translatey()
    • scale() 缩放(倍数)
    • scalex()
    • scaley()
    • rotate() 旋转(角度deg)
    • skew() 扭曲(角度)x扭曲y变x不变
    • skewx()
    • skewy()
    • 3d
    • translatez()
    • translate3d()
    • scalez()
    • scale3d()
    • rotatex()
    • rotatey()
    • rotatez()

    css过渡

    相关属性

    • transition

    • transition-property过渡属性

    • none

    • all所有可以进行过渡的CSS属性

    • transition-timing-function 过渡方式

    • linear: 线性过渡

    • ease: 平滑过渡。

    • ease-in: 由慢到快。

    • ease-out: 由快到慢

    • ease-in-out: 由慢到快再到慢

    • transition-duriation过渡时间
    • transition-delay延迟

    触发时机

    • 伪类选择器
    • JS
    • 媒体查询

    CSS3动画

    相关属性

    • animation

    • animation-name动画名称

    • animation-iteration-count循环次数infinite无限循环

    • animation-duration动画持续时间

    • animation-timing-function动画的过渡类型

    • linear: 线性过渡

    • ease: 平滑过渡。

    • ease-in: 由慢到快。

    • ease-out: 由快到慢

    • ease-in-out: 由慢到快再到慢。

    • animation-delay动画延迟时间

    • animation-dirction动画方向

    • normal: 正常方向

    • reverse: 反方向运行

    • alternate: 动画先正常运行再反方向运行,并持续交替运行

    • alternate-reverse: 动画先反运行再正方向运行,并持续交替运行

    • animation-play-state:running运动/pasused暂停

    • animation-fill-mode:动画时间之外的状态

    • none: 默认值。不设置对象动画之外的状态

    • forwards: 设置对象状态为动画结束时的状态

    • backwards: 设置对象状态为动画开始时的状态

    • both: 设置对象状态为动画结束或开始的状态

    关键帧

    @keyframes 动画名称{
          form{
          }
    	  to{
    	  } 
    }
  • 相关阅读:
    ansible使用sudo
    shell中命令作为变量使用
    for循环使用
    移动多个文件
    获取ip
    if、elif 条件判断
    python安装二进制k8s 1.11.0 一个master、一个node 查看node节点是主机名---apiserver无法启动,后来改了脚本应该可以
    (转)《黑客帝国完全解析》
    关于敏捷开发方法(Agile Software Development)的阅读笔记
    关于软件工程结对编程作业 PairProject : Elevator Scheduler(电梯调度算法的实现与测试)的总结
  • 原文地址:https://www.cnblogs.com/DCL1314/p/7305995.html
Copyright © 2011-2022 走看看