zoukankan      html  css  js  c++  java
  • CSS3动画基本的转换和过渡

    理论知识不扎实,在一定程度上能体现你解决问题的能力。今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到。 

    常用动画属性:

    transform:translate(x,y);//平移,x代表向又移动距离,y代表向下移动距离;

    transform:scale(x,y);//缩放,x代表水平缩放倍数,y代表垂直缩放倍数; 

    transform:rotate(x);//旋转,x代表顺时针旋转多少度,如rotate(10deg) ;

    transform:skew(x,y);//倾斜,xy分别代表沿x轴和y轴的倾斜 动画过渡。

    transition-property列出元素应该过渡的CSS属性,可过度属性包括背景、边框和方框模型属性: 

    transition-duration设置过渡持续时间 

    transition-timing-function设置过渡的速度,可用ease、linear、ease-in、ease-out或ease-in-out之一

    transition-delay动画延时时间 

    缩写形式:

    #selector{transition:transform 0.2s ease} 

    值的顺序必须为以下顺序: transition-property    transition-duration    transition-function    transition-delay 

    实例展示:

    CSS代码: CSS3转换和过渡 图中黄线圈出来的是过渡部分代码,设置了1s内完成相应动画,绿框里面就是转换效果,表示鼠标移至h1标题上时,文字将扩大2.5倍。

    总而言之,掌握了动画的基础知识,是多么的重要。

    转载自:http://www.aspnetjia.com/Cont-79.html

  • 相关阅读:
    2015 浙江省赛 H
    2015 浙江省赛 H
    2015 浙江省赛 Beauty of Array (思维题)
    2015 浙江省赛 Beauty of Array (思维题)
    山区建小学(区间DP)
    山区建小学(区间DP)
    Hanoi双塔问题(递推)
    Hanoi双塔问题(递推)
    组合的输出(递归)
    组合的输出(递归)
  • 原文地址:https://www.cnblogs.com/aspnetjia/p/5139713.html
Copyright © 2011-2022 走看看