zoukankan      html  css  js  c++  java
  • 关于CSS的图像放大问题的解决,需要借助jQuery等直接用css3设置

        W3C标准中对css3transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

        

    1、color: 通过红、绿、蓝和透明度组件变换(每个数值处理)如:background-color,border-color,color,outline-color等css属性;

    2、length: 真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性;

    3、percentage:真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性;

    4、integer离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性;

    5、number真实的(浮点型)数值,如:zoom,opacity,font-weight,等属性;

    6、transform list:详情请参阅:《CSS3 Transform

    7、rectangle:通过x, y, width 和 height(转为数值)变换,如:crop

    8、visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility

    9、shadow: 作用于color, x, y 和 blur(模糊)属性,如:text-shadow

    10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image

    11、paint server (SVG): 只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似

    12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化

    13、a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化

    具体什么css属性可以实现transition效果,在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型,大家可以点这里了解详情。这里需要提醒一点是,并不是什么属性改变都为触发transition动作效果,比如页面的自适应宽度,当浏览器改变宽度时,并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。

    原文http://www.w3cplus.com/content/css3-transition/

  • 相关阅读:
    centos6搭建docker镜像私服
    CentOS6安装docker
    通过pyenv进行多版本python管理
    ( 转)性能测试--地铁模型分析
    LoadRunner基于HTML-based script和URL-based script方式录制的区别和各自的使用场景
    一道Oracle子查询小练习
    Oracle多表连接查询
    LoadRunner关联通用函数的学习
    Selenium2(WebDriver)总结(五)---元素操作进阶(常用类)
    selenium2(WebDriver) API
  • 原文地址:https://www.cnblogs.com/yuqiandoudou/p/4403064.html
Copyright © 2011-2022 走看看