`

css3动画系列之scale()方法

阅读更多

浏览器支持情况:

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 需要前缀 -ms-。

 

scale() 方法

通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:

 

实例

 

div
{
transform: scale(2,4);
-ms-transform: scale(2,4);	/* IE 9 */
-webkit-transform: scale(2,4);	/* Safari 和 Chrome */
-o-transform: scale(2,4);	/* Opera */
-moz-transform: scale(2,4);	/* Firefox */
}

亲自试一试

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。

分享到:
评论

相关推荐

    css 3 动画实实现点赞动画

    在CSS 3中,动画是通过一系列的关键帧来创建动态效果的,这使得网页元素能够以平滑的方式从一种状态转换到另一种状态。在“css 3 动画实实现点赞动画”中,我们主要利用了`@keyframes`规则和`transform`属性来创建一...

    css3动画系列示例包

    在描述中提到的"css动画代码,一些demo"表明,这个压缩包包含了一系列的实例代码,这些代码是实际运行的示例,可以帮助学习者理解并应用CSS3动画。每个示例可能都是一个单独的CSS3动画效果,如旋转、平移、缩放、...

    CSS3动画的集合

    **CSS3 动画概述** CSS3(Cascading Style Sheets Level 3)是样式表语言的最新版本,为网页设计带来了许多强大的新特性,其中动画功能尤其引人注目。CSS3动画允许开发者通过纯CSS实现动态效果,无需依赖JavaScript...

    css3动画详解

    尽管大多数现代浏览器都支持CSS3动画,但在开发时应考虑老版本浏览器的兼容性,可以借助前缀(如 `-webkit-`)和JavaScript库(如jQuery的`.animate()`方法)来确保更广泛的兼容性。 通过理解和熟练运用CSS3动画,...

    css3动画图标效果

    CSS3是层叠样式表(Cascading Style Sheets)的第三个主要版本,它引入了许多新的特性和功能,其中最引人注目的就是动画效果。在本主题“CSS3动画图标效果”中,我们将深入探讨如何利用CSS3来创建富有动态感的图标...

    好玩的css3动画效果

    CSS3 引入了一系列新的特性来增强网页的表现力,其中动画功能尤为突出。它通过变换(transform)、过渡(transition)和关键帧动画(animation)等技术让页面元素能够以更加生动的方式变化,为用户带来更好的交互体验。 #...

    css3 3D邮寄信封打开动画特效

    "css3 3D邮寄信封打开动画特效"是利用CSS3的3D转换和动画特性来模拟信封从关闭到打开的过程,为用户创造一种视觉上的惊喜。这种特效常见于网站的登陆页面、通知提示或者创意展示中,可以增强用户的浏览体验。 1. **...

    CSS3游戏首页动画按钮,CSS3动画按钮

    **CSS3游戏首页动画按钮与CSS3动画按钮详解** 在网页设计中,视觉效果和交互体验是提升用户体验的重要因素。CSS3(Cascading Style Sheets Level 3)作为现代网页设计的标准,为开发者提供了丰富的样式控制和动画...

    css3模拟3D效果城市夜间行走动画特效

    本案例中,我们探讨的是"css3模拟3D效果城市夜间行走动画特效",这是一种利用CSS3的特性来创建逼真的3D城市场景,并配以夜间行走动画的创新技术。 首先,CSS3中的3D转换是实现这种特效的关键。3D转换包括translate...

    css3鼠标悬停动画效果

    在“css3鼠标悬停动画效果”这个主题中,我们将深入探讨如何利用CSS3实现当鼠标悬停在元素上时产生动态效果的技术。 首先,让我们了解CSS3中的关键帧动画(@keyframes)。关键帧动画允许开发者定义一个动画过程中的...

    css3样式动画

    在实际项目中,div元素是最常用于布局和设计的HTML元素之一,利用CSS3动画,可以实现各种动态效果,如滑动、旋转、淡入淡出等。以下是一些常见的div动画示例: 1. **滑动动画**:通过改变`transform`属性的`...

    CSS3动画特效

    **CSS3 动画特效详解** CSS3是 Cascading Style Sheets 的第三版,它为网页设计带来了革命性的变化,特别是其强大的动画功能。在本文中,我们将深入探讨如何利用CSS3实现`div切换`、`延时动画`、`元素直线运动`、`...

    27个精致的CSS3动画效果

    2. **动画(Animations)**:相比过渡,CSS3动画更复杂,可以通过`@keyframes`规则定义一系列的样式变化,并使用`animation`属性指定动画的播放速度、次数、方向等。这些动画可以循环播放,为网页元素创造出更丰富的...

    CSS3 transform图片飞入动画特效

    总的来说,CSS3 transform图片飞入动画特效是一种利用现代Web技术增强用户体验的实用方法,它不仅能够吸引用户的注意力,还能让网站或应用更具活力和吸引力。在设计和开发过程中,合理运用这些技术,可以使页面更加...

    两款纯css3实现的动画菜单.zip

    在IT行业中,CSS3是网页样式和布局的重要技术,它为开发者提供了丰富的动画效果和更加精细的控制。本文将深入探讨“两款纯CSS3实现的动画菜单”的知识点,旨在帮助你理解和应用这些技术来提升用户体验。 首先,让...

    10例精彩CSS3动画效果

    1. **关键帧动画(@keyframes)**:CSS3中的关键帧动画是实现动画效果的核心。通过定义动画的不同阶段,即关键帧,浏览器会自动补全动画过程。例如: ```css @keyframes fadeIn { 0% { opacity: 0; } 100% { ...

    Twitter红心点赞CSS3动画按钮特效.zip

    在本文中,我们将深入探讨如何使用CSS3来创建一个仿Twitter红心点赞的动画按钮特效。这个效果是基于JavaScript和CSS3技术实现的,能够为用户界面增添动态和交互性,提升用户体验。让我们一起探索其背后的原理和实现...

    CSS3特效-CSS3实现烟花特效

    CSS3是层叠样式表(Cascading Style Sheets)的第三版,它引入了许多新特性和功能,极大地扩展了网页设计的可能性,包括动画和特效。烟花特效就是其中的一种,它可以为网页增添节日氛围或者为用户界面带来独特的视觉...

    css3实现的圆形从中心向四周扩散动画效果

    在本文中,我们将深入探讨如何使用CSS3来创建一个引人注目的动画效果:圆形从中心向四周扩散。这个效果可以用于网站加载指示器、按钮激活反馈等多种应用场景,为用户界面增添动态美感。 首先,我们需要了解CSS3中的...

    CSS3五星红旗国庆节庆祝动画特效.zip

    【CSS3五星红旗国庆节庆祝动画特效】 在网页设计中,CSS3(层叠样式表第三版)已经成为了实现各种动态效果和高级视觉设计的重要工具。这个“CSS3五星红旗国庆节庆祝动画特效”就是一个利用CSS3的强大功能,为庆祝...

Global site tag (gtag.js) - Google Analytics