Css中的变形及过渡动画
在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易。其语法如下:
transform:none | <transform-function>+
其中对于<transform-function>这一属性值,css中规定了4类常用变换
1.translate()
该值指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0 。
例:
.exp{
width:150px;
height:150px;
background:red;
}
.exp:hover{
transform:translate(100px,100px);
}
当鼠标移动到元素上时,元素的位置发生了改变(向左平移了100px,向下平移了100px)。
当然也可以指制定某一个方向上的平移,如translateX(),translateY(),这时,括号里的值只有一个,表示平移的长度。
2.rotate()
该值指定了对象的2d旋转,括号里面为旋转度数,单位为deg。特别注意,在使用该属性值时要先设置元素的中心点,即transform-origin,这个样式的值可以为表示长度的单位,也可以是百分比。
例:
.exp{
width:150px;
height:150px;
background:red;
} .exp:hover{
transform-origin:0 50%;
transform:rotate(45deg);
}
在2d旋转中默认旋转方向为顺时针方向,旋转中心为transform-origin所设置的位置。同时,我们也可以定义其旋转方式为沿着旋转轴方向旋转,例如rotateX(),rotateY()。
3.Scale()
该属性表示的是元素的缩放,在2d变形中括号里的值有两个,分别表示x轴和y轴方向的缩放,其值为一数字,表示的是与原来尺寸的比例系数。
例:
.exp{
width:150px;
height:150px;
background:red;
}
.exp:active{
transform-origin:0 50%;
transform:scale(2,1.5);
}
与上面的属性值类似,我们可以设置单一方向上的缩放,scaleX(),scaleY()。
4.Skew()
该属性值表示的是元素的倾斜,该值得两个参数分别表示X轴与Y轴上的倾斜,其值都以角度(deg)表示。
例:
.exp{
width:150px;
height:150px;
background:red;
transform:skew(25deg,0);
}
在倾斜中,最后所得的元素的位置与transform-origin有关。
上述的四个属性不仅适用于2d场景,同时也适用于3d场景中,此时只需要将其改写为translate3d(),rotate3d(),skew3d(),scale3d()。此时,坐标系中有XYZ三个坐标轴,其中X轴为水平方向,正方向为右,Y轴为垂直方向,正方向向下,Z轴为垂直屏幕的方向,垂直屏幕向外(即指向屏幕前的自己)为正方向。
了解了css中的变形之后,我们可以由此设计过渡动画。这里的过渡动画是指通过css使得元素的某些属性发生改变时,所产生的动画效果。在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
第一,在默认样式中声明元素的初始状态样式;
第二,声明过渡元素最终状态样式,比如悬浮状态;
第三,在默认样式中通过添加过渡函数,添加一些不同的样式。
- transition-property(过渡属性):
表示在动画中所要产生动画效果的属性,这里的过渡属性可以设置任意的属性为值,我们也可以直接将它的值设置为all,表示每个产生变化的属性都产生动画效果。
- transition-duration(过渡所需时间):
该属性主要用来设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间。单位为s。
例
.exp{
width:150px;
height:150px;
background:red;
transition-property:width;
transition-duration:1s;
}
.exp:hover{
width:300px;
}
当鼠标移动到盒子上时,盒子缓慢得拉长。
3. transition-timing-function(动画--过渡函数) :
该属性表示的是当动画发生时,动画的表现效果。其值有:
ease:默认值,逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))
linear:匀速过渡效果(等于 cubic-bezier(0,0,1,1))
ease-in:加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))
ease-out:减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))
ease-in-out:加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1.0))
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。(动画速度自定义)
4.transition-delay(动画--过渡延迟时间):
transition-delay主要用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行。
例:
.exp{
width:150px;
height:150px;
background:red;
transition-property:width;
transition-duration:1s;
transition-delay:1s;
}
.exp:hover{
width:300px;
}
当鼠标移到盒子上时,盒子的宽度变为了300px,之后过了一秒钟,产生动画效果。
将以上多个属性连在一起,则可写为:
transition:[ none | <transition-property> ] || < transition-duration > || <transition-timing-function> || < transition-delay> [,*]
例:
.exp{
width:150px;
height:150px;
background:red;
transition:width 1s ease 1s;
}
.exp:hover{
width:300px;
}
Css中的变形及过渡动画的更多相关文章
- CSS中的变形、过渡、动画效果
一.变形 .过渡效果 1:元素平移 x方向 y方向 transform:translate(100px 100px); 2:过渡动画效果 a:什么属性参与过渡效果 b:过渡时间 c:过渡的效果 值包含 ...
- CSS 奇技淫巧:动态高度过渡动画
这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: { height: unset; transition: all 0.3s linear; ...
- CSS基础篇之背景、过渡动画
background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
- 重新想,重新看——CSS3变形,过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
- 第8章 CSS3中的变形与动画(上)
变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时 ...
- CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别
css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...
- 067——VUE中vue-router之使用transition设置酷炫的路由组件过渡动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS过渡动画之transition
O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...
随机推荐
- [转]Android访问网络,使用HttpURLConnection还是HttpClient
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/12452307 最近在研究Volley框架的源码,发现它在HTTP请求的使用上比较有 ...
- Ubuntu Wpa wifi connection
最近做一个项目,需要做一个WIFI连接模块,这几天都在折腾,终于,今天终于是连上网络了,只不过连网的过程有点慢,还有一些缺点,先写下来以备忘记. 1.环境建立: sudo apt-get instal ...
- 坑爹的vector iterators incompatible错误(VS中属性页-->C/C++-->代码生成-->>运行库)
之前一直被这个错误折磨着,就是不知道问题在那,后来找了很多资料,大概都是说这是因为多个线程同时操作vector的问题(参考这里).可是我这里的代码并没有问题,因为同样的代码在别的解决方案中已经成功运行 ...
- Mac打造python2 python3开发环境
最新版的MacOS Sierra默认带的python环境仍然为2.7.10,本文将介绍使用Brew安装python3.5并做简单的配置,打造python2,python3共存的开发环境 直接尝试bre ...
- CGRectInset CGRectoffset UIEdgeInsetsInsetRect 这三个函数的使用情况
//CGRectInset 将原来的矩形放大或者缩小,正表示缩小,-表示放大. CGRect rect= CGRectMake(20, 50, 100, 80); CGRect rect1=CGRec ...
- C#摇奖程序
private void Form1_Load(object sender, EventArgs e) { //取消跨线层访问控件的判断 Control.CheckForIllegalCrossThr ...
- 关于javascript中setTimeout()和clearTimeout()的疑惑。
由于在w3school中学习javascript时,当学到setTimeout()和clearTimeout()方法时.根据它所提供的例子(下面的代码转自w3cschool)—计数程序,发现当你不停的 ...
- (二)HTML5 - Web SQL 本地数据库
简介 WEB SQL Database即本地的SQLite数据库,使用的方式和方法和SQLite基本相同 判断浏览器是否支持 if (!window.openDatabase) { alert('Da ...
- C++ Primer 5th 第4章 表达式
表达式是运算对象及运算符组成的式子,表达式求值将得到一个结果,单独的变量或者字面值也算表达式,结果是其本身. 运算符分为:一元运算符.二元运算符.三元运算符.一元即一个作用对象,二元两个作用对象,以此 ...
- CREATE DATABASE
CREATE DATABASE IF NOT EXISTS `focusdata` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;USE `fo ...