css放大属性（css实现放大缩小的动画效果）

本篇文章给大家谈谈css放大属性，以及css实现放大缩小的动画效果对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、css中如何同时设置网页中中的字体大小及背景颜色？
• 2、css里的zoom属性详解和使用
• 3、css有什么属性可以局部放大
• 4、css3 transition和transform的应用
• 5、CSS字体及比例变大
• 6、CSS或jquery中如何改变background-image的大小？

css中如何同时设置网页中中的字体大小及背景颜色？

因为“background:#00FF00”后面没有添加“;”符号，浏览器将“background”解析成了“background:#00FF00font-size:80px;”，所以背景和字体大小不能同时作用。

1、新建html文档，在body标签蔽友掘中添加一些p标签，这时网页中将会输出p标签默认的背景颜色和字体大小：

2、为p标签设置“background”属性，属性值为颜色，这时p标签的背景颜色将会变成之前设置的颜色：

3、为p标签设置“告纯font-size”属性，属宏核性值为字体大小，这时p标签的字体大小将会变成之前设置的字体大小：

css里的zoom属性详解和使用

zoom属性确实是ie专有属性，除了设置或者检索对象的缩放比例之外，它还具有触发ie的haslayout属性，清除浮动，清除margin重叠等作用。 但是火狐浏览器不支持zoom属性，不过在webkit内核浏览器中zoom这个属性也是可以被支持的。

显然，你这里设置的zoom：2，  即表示放大为原来的2倍，里面的字体也相应被放大了2倍。

在IE浏庆好览器里，Zoom的使用方法是这样的：

 zoom : normal | number

normal :　 默认值。使用对象的实际尺寸

number :　 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数，可以是数值，也可以是百分比。如：zoom:1，zoom:120%。而这个属性只有在IE中才起作用，所以很少用到它的实际用途，而最誉闹铅经常用到作用是清除浮动等。

其实这个属性是一个不标准的css属性，因此一般在非IE浏览器中是不推荐使用zoom来实现div 的缩放效果的，如果想要广泛引用实现放大或者缩小的效果，可以直接用css3的transform属性来替代的，即你这里可以设置为transform：scale（2）。关于transform属性的具体属性和使用可查看在线教程CSS3 transform 属性。

希望我的回答能弯棚够帮到你。

css有什么属性可以局部放大

先固定你所要仿改放大的局部肆轿，为备雹判了不影响其他内容 设置一个overflow ，然后用transform:scale(n)

n的值就是你想放大或者缩小的值

css3 transition和transform的应用

一、首先学习的是transition属性（zoom不支持transition,适用于具体数值的属性值变化或者背景图的变换）

transition 过渡 作为一个复合属性

1.transition-property 指定可以过渡的属性

默认值是all 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

2.transition-duration 指过渡完成的时间

默认值为0s

3.transition-timing-function 过渡的动画类型

默认值为ease

ease 规定慢速开始，然后变快，之后慢速结束的过渡效果

ease-in 规定以慢速开始的过渡效果

ease-out 规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

linear 规定以相同速度开始至结束的过渡效果

cubic bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值

4.transition-delay 延迟执行过渡的时间

默认值为0s

二、transform属性

transform 向元素应用2D或3D转换 只对block级元素生效

1.translate 位移

translateX() 在x轴上发生位移或者变形

translateY() 在y轴上发生位移或者变形

translate(x,y) 在x轴 ，y轴上发生位移或者变形 当只有一个值的时候，只有x轴生效

2.scale 缩放

scaleX() 设置在x轴上发生缩放

scaleY() 设置在y轴上发生缩放

scale(x,y) 设置在x轴，y轴上发生缩放 当只有一个值的时候，x，y轴都发生缩放可以设置负数 使用场景：设置小于12px的字体

3.rotate 旋转 2d旋转 设置元素在2d平面旋转（z轴），正数按顺时针，负数按逆时针

rotateX（）设置沿x轴旋转

rotateY () 设置沿y轴旋转

4.skew 倾斜

skewX 绕x轴发生倾斜

skewY 绕y轴发生倾斜

skew(x,y) 绕x,y轴发生的倾斜 x轴数神和y轴和我们理解的相反，常用于平行四边形图案

三、transform-origin: 设置旋转元素的基点位置

transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；

因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自哪拿己中心位置进行变化的。

但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。

下面我们主要来看薯缓亏看其使用规则：

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom 。

语法：-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ] ?

transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数 ;

top left | left top 等价于 0 0；

top | top center | center top 等价于 50% 0

right top | top right 等价于 100% 0

left | left center | center left 等价于 0 50%

center | center center 等价于 50% 50%（默认值）

right | right center | center right 等价于 100% 50%

bottom left | left bottom 等价于 0 100%

bottom | bottom center | center bottom 等价于 50% 100%

bottom right | right bottom 等价于 100% 100%

CSS字体及比例变大

css样式没有引入，可以看看head的头部 要引入的css样式的html代码

[img]

CSS或jquery中如何改变background-image的大小？

在css中改变background-image的大小可以通过斗李早将背景图片放置的一个div样式中，然后设置div的样式属性来实现。示例核心代码：

div{

background:url(图片路径);

background-size:800px 600px;

background-repeat:no-repeat;

}

其中空雀图片路径可以使用相对路径也可以使用绝对路径，不用添加双引号。最后扰镇一行的background-repeat:no-repeat意思可不允许背景图片在网页中平铺，只能使用一次。

扩展资料：

通过jquery中改变background-image的大小的实例代码：

!DOCTYPE html

html

head

meta charset="utf-8"

title/title

script type="text/javascript"

     window.onload=function(){

$('.box').CSS('backgroundSiz','300px 500px')

}

/script

style type="text/css"

.box{

background-image: url(1.png);

}

/style

/head

body

div class="box"

/div

/body

/html

关于css放大属性和css实现放大缩小的动画效果的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。