关于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/

时间: 2024-10-10 15:42:47

关于CSS的图像放大问题的解决,需要借助jQuery等直接用css3设置的相关文章

图像放大算法

http://www.cnblogs.com/celerychen/archive/2010/11/25/3588222.html 一. 图像放大算法 图像放大有许多算法,其关键在于对未知像素使用何种插值方式.以下我们将具体分析几种常见的算法,然后从放大后的图像是否存在色彩失真,图像的细节是否得到较好的保存,放大过程所需时间是否分配合理等多方面来比较它们的优劣. 当把一个小图像放大的时候,比如放大400%,我们可以首先依据原来的相邻4个像素点的色彩值,按照放大倍数找到新的ABCD像素点的位置并进

图像放大快速算法

图像放大快速算法实现的原理主要有以下两点: 1.横向缩放与纵向缩放分开,而先后顺序取决于缩放前后的图像比例: 若SrcHeight/DstWidth>SrcWidth/DstWidth,则先纵向缩放,否则横向缩放. 2.利用整数运算代替浮点运算,由于是分步缩放,以横向缩放为例,利用二次线性插值公式,再变形一下如下: f(i,j+v) = (1-v)f(i,j) +vf(i,j+1); 其中i为第i行,j为第j列,v表示求得放大后坐标的小数部分. 这里最重要的并没有直接用小数运算,而是通过将小数区

[看书][CSS精粹(第2版)]第三章 CSS和图像 & HTML网页布局

本章主要讲述作为背景图像方面的技巧. 1.边框(添加边框样式.去除边框): 2.为页面设置背景图像,位置设定,固定背景图像: 3.为任意元素设置背景图像: 4.文字放在图像的上面(作为背景图像): 5.为文档添加多个背景图像(本例利用html和body元素产生多重背景图像的效果): 6.在页面中使用透明效果(使用PNG格式图像). 利用网络搜索补充学习了padding的4个方向顺序(上右下左 顺时针),流式布局(看网上的解释结合书里的描述,大概是指页内布局元素采用百分数指定位置和大小). [个人

[Surface] 在win8.1上使用QQ截图放大问题(解决办法)

在使用每次截图的时候整个都被放大了,很让人郁闷,截不到完整的图,本着遇到问题解决问题的想法,这事早解决早好.   开工: 1. 度娘上搜索"win8 qq截图 放大",找到很多资料,整理了一下,分为两类 2. 一类,是修改win8的配置,直接上图,这种方法修改之后,屏幕字符太小(Surface更小),小屏幕不建议采用: 3. 另外一类,是修改qq的配置,Disable DPI设置(DPI是Dots Per Inch(每英寸所打印的点数)的缩写,是打印机.鼠标等设备分辨率的单位),如下图

[转载]CSS<a href>链接样式冲突解决方法!

给自己这个初学者看的! 原文地址:CSS<a  href>链接样式冲突解决方法!作者:叶朗 这里我简要的说一下:关于a href样式冲突 首先我有一个外部CSS样式文件(index.css)里面直接用a:link a:active直接写了 而网站首页和其他栏目页都调用<link href="css/index.css" rel="stylesheet" type="text/css" />,但是我想再在首页加上新的链接并且

如何解决谷歌浏览器下jquery无法获取图片的尺寸

代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没有问题,但是在谷歌中可能会出现问题,之所以没货的尺寸就是因为图片没有加载完成. 修改方法如下: $(document).ready(function(){ $img.load(function(){ var img_h=$img.height(); var img_w=$img.width(); }

【转】解决UpdatePanel 与 jQuery的冲突

现在越来越多的朋友喜欢将jQuery和ASP.NET AJAX 一起来用,最近,许多印度人在forum里抱怨说UpdatePanel和jQuery不兼容,许多jQuery效果在UpdatePanel更新之后就不work.本篇通过分析两者的框架结构来解决这个兼容性问题. 问题重现: 1. 在页面中添加ScriptManager和UpdatePanel 2. 在UpdatePanel中添加元素A 3. 用jQuery对元素A添加X效果 4. 在UpdatePanel中加一个Button B用作pos

这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则) No5.文章段落 1.文字属性 文字属性包含font-*和tex

解决win7打印机共享出现“无法保存打印机设置(错误0x000006d9)的问题

最新解决win7打印机共享出现“无法保存打印机设置(错误0x000006d9)的问题,由系统下载吧率先分享: 有些用户在使用Windows7系统过程中,碰到到win7打印机共享出现“无法保存打印机设置.操作无法完成(错误0x000006d9)”的提示,这是怎么回事呢?其实出现这种故障,是因为windows firewall服务未开启的原因,要想解决win7打印机共享出现“无法保存打印机设置(错误0x000006d9)的问题,那么就需开启该服务.下面小编介绍开启windows firewall服务