zoukankan      html  css  js  c++  java
  • 今日学习总结,2D位移,缩放,旋转,斜切扭曲,过渡,动画

    (一)2D 位移,缩放,旋转,斜切扭曲;
    位移:
    transform:translate(?px,?px)
    不影响其他的布局,只对自己设置的起作用
    缩放:
    transform:scale(.5,.5) 括号里代表的是百分比。
    参照点默认中心点
    旋转:
    transform:rotate(45deg)括号里表示度数45°也可以使用弧度rad
    顺序为顺时针顺序
    斜切扭曲:
    transform:skew(x,y)分别表示X,Y轴不不同程度,可以用弧度也可以用度数
    参照点坐标:
    transform-origin(x,y)
    重置原点,以这个原点来完成位移、缩放、旋转、斜切扭曲。

    (二)过渡:transition:all(过渡的地方)4s(周期)function(效果类型)2s(延迟时间)
    效果类型
    线性过渡:linner
    平滑过渡:ease
    由慢到快:ease-in
    由快到慢:ease-out
    由慢到快再到慢:ease-in-out
    《需要定义最初的大小位置,以及最后到达的位置属性;还可以加入最初到最后的类型,比如旋转等;》

    (三)动画 animation:name(动画名) time(周期)function(类型) number(次数)(infinite无限)
    @keyframes name { 30%{}
    50%{} } 申明一个动画以及名称;里面随意定义;
    name: none 不定义动画名称 <identifier>: 多个动画名称,用li来表示;
    《也是需要定义最初的状态,还有动画执行中30%{},50%{},这样来表示动画执行到某个时段的状态》

  • 相关阅读:
    java文件压缩与解压
    常见Java库漏洞汇总
    ref:Spring JDBC框架
    ref:web 防止SQL注入方法
    ref:spring配置数据库方式
    ref:web security最新学习资料收集
    Hack12306
    mysql copy data from table to another
    MYSQL
    tcpdump 抓包过滤
  • 原文地址:https://www.cnblogs.com/luoyao19910515/p/4643817.html
Copyright © 2011-2022 走看看