zoukankan      html  css  js  c++  java
  • Css3动画

    CSS3 转换:
    通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
    您可以使用 2D 或 3D 转换来转换您的元素。

    一、transform:
    2D 转换方法:子属性:translate()、rotate()、scale()、skew()

    transition特性

     二、原点 transform-origin(x,y) x,y可以用百分比来表示 表示原点的横向距离和纵向距离
    在没有重置transform-origin改变元素原点位置的情况下,
    CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。
    我们可以通过transform-origin来对元素进行原点位置改变
    例: transform-origin: 0 0; 以左上角为原点
    50% 0; 以上中为原点
    100% 以右中为原点

    二、transtion:过渡动画:
    transition属性是一个复合属性,主要包括以下几个子属性:

    四、animation:
    组合写法(简写):animation: myfirst 5s linear 2s infinite alternate both;

    2.动画效果

    animation:动画名称,一个周期花费时间,运动曲线(默认ease),动画延迟(默认0),播放次数(默认1),

    是否反向播放动画(默认normal),是否暂停动画(默认running)

    animation能解决以下问题

    1、transition需用事件触发【比如加个hover伪类】,不能在网页加载时自动发生
    2、一次性,不能重复发生,除非一再触发
    3、只有两个状态:开始和结束状态
    4、一条transition规则只能定义一个属性
  • 相关阅读:
    第四周编程总结
    第三周编程总结
    第二周编程总结
    第一周编程总结
    2019年寒假作业3
    2019年寒假作业2
    2019年寒假作业1
    第七周编程总结
    第六周编程总结
    第五周编程总结
  • 原文地址:https://www.cnblogs.com/swjRH/p/13587228.html
Copyright © 2011-2022 走看看