八,CSS3变形
1,旋转 rotate()
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值
,元素相对原点中心顺时针旋转
;如果这个值为负值
,元素相对原点中心逆时针旋转
。
示例:将文本旋转回到原来水平位置。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div><span>我不想旋转(^_^)</span></div>
</div>
</body>
</html>
css:
.wrapper {
margin: 100px auto;
width: 300px;
height: 200px;
border: 2px dotted blue;
}
.wrapper div{
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background: green;
color: #fff;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform:rotate(-20deg);
}
.wrapper span {
display:block;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform:rotate(20deg);
}
2,扭曲 skew()
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴
和Y轴
按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状。
第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。
1、skew(x,y)使元素在水平和垂直方向同时扭曲
2、skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);
3、skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)
示例:图形扭曲成平行四边形,而文字不扭曲
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div><span>我不想被扭曲(^_^)</span></div>
</div>
</body>
</html>
css:
.wrapper {
width: 300px;
height: 100px;
border: 2px dotted red;
margin: 30px auto;
}
.wrapper div {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: orange;
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform:skew(45deg);
}
.wrapper span {
display:block;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
3,缩放 scale()
缩放 scale()函数 让元素根据中心原点对对象进行缩放。
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
注意:Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。
2、scaleX(x)元素仅水平方向缩放(X轴缩放)
3、scaleY(y)元素仅垂直方向缩放(Y轴缩放)
示例:让容器的鼠标滑过时的状态缩小0.8。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div>我将缩小0.8</div>
</div>
</body>
</html>
css:
.wrapper {
width: 200px;
height: 200px;
border:2px dashed red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
background: orange;
text-align: center;
color: #fff;
}
.wrapper div:hover {
opacity: .5;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
4,位移 translate()
translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件
。
translate我们分为三种情况:
1、translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
2、translateX(x)仅水平方向移动(X轴移动)
3、translateY(Y)仅垂直方向移动(Y轴移动)
示例:让不知道宽度和高度的元素实现水平、垂直居中。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
我不知道我的宽度和高是多少,我要实现水平垂直居中
</div>
</body>
</html>
css:
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
5,矩阵 matrix()
matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵,用来指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素
,此属性值使用涉及到数学中的矩阵,我在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果需要深入了解,需要对数学矩阵有一定的知识。
a为元素的水平伸缩量,1为原始大小;
b为纵向扭曲,0为不变;
c为横向扭曲,0不变;
d为垂直伸缩量,1为原始大小;
e为水平偏移量,0是初始位置;
f为垂直偏移量,0是初始位置
示例:通过matrix()函数实现translate(100px,100px)的效果
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div></div>
</div>
</body>
</html>
css:
.wrapper {
width: 300px;
height: 200px;
border: 2px dotted red;
margin: 40px auto;
}
.wrapper div {
width:300px;
height: 200px;
background: orange;
-webkit-transform: matrix(1,0,0,1,100,100);
transform: matrix(1,0,0,1,100,100);
}
6,原点 transform-origin
任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。
在没有重置transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。但很多时候,我们可以通过transform-origin来对元素进行原点位置改变
,使元素原点不在元素的中心位置,以达到需要的原点位置。
transform-origin取值和元素设置背景中的background-position取值类似。
示例:将元素的原点重置到右上角,然后进行15度的扭曲。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div>我修改原点之后在进行15度的扭曲</div>
</div>
</body>
</html>
css:
.wrapper {
width: 400px;
height: 100px;
border: 2px dotted red;
margin: 20px auto;
text-align: center;
line-height: 100px;
}
.wrapper div {
background: orange;
color: #fff;
-webkit-transform: skew(15deg);
-moz-transform: skew(15deg);
transform: skew(15deg);
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
transform-origin: top right;
}
九,CSS3动画
1,transition
早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻。简单点说,就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
第一,在默认样式中声明元素的初始状态样式;
第二,声明过渡元素最终状态样式,比如悬浮状态;
第三,在默认样式中通过添加过渡函数,添加一些不同的样式。
CSS3的过度transition属性是一个复合属性,主要包括以下几个子属性:
- transition-property:指定过渡或动态模拟的CSS属性
- transition-duration:指定完成过渡所需的时间
- transition-timing-function:指定过渡函数
- transition-delay:指定开始出现的延迟时间
(1),过渡属性 transition-property
transition-property用来指定过渡动画的CSS属性名称,而这个过渡属性只有具备一个中点值
的属性(需要产生动画的属性)才能具备过渡效果,其对应具有过渡的CSS属性主要有:
特别注意:当“transition-property”属性设置为all时,表示的是所有中点值的属性
。
(2),过渡所需时间 transition-duration
transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间。
(3),过渡函数 transition-timing-function
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度
,以及过渡期间的操作进展情况,其中要包括以下几种函数:
(4),过渡延迟时间 transition-delay
transition-delay属性和transition-duration属性极其类似,不同的是transition-duration是用来设置过渡动画的持续时间,而transition-delay主要用来指定一个动画开始延迟执行的时间
有时我们想改变两个或者多个css属性的transition效果时,只要把几个transition的声明串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点:第一个时间的值为 transition-duration,第二个为transition-delay。
示例:让容器在hover状态下宽度和高度,从200px慢慢过渡到400px。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div></div>
</body>
</html>
css:
div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
-webkit-transition-property : all;
transition-property : all;
-webkit-transition-duration:.5s;
transition-duration:.5s;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-delay: .18s;
transition-delay:.18s;
}
div:hover {
width: 400px;
height: 400px;
}
示例:让容器从正方形渐显效果all .5s ease-in .2s慢慢过渡到圆角。
采用悬浮触发过渡动画方式,过渡0.2s后触发,整个过渡时间持续0.5s。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div>鼠标放到我的身上来</div>
</div>
</body>
</html>
css:
.wrapper {
width: 400px;
height: 200px;
margin: 20px auto;
border: 2px dotted red;
position:relative;
}
.wrapper div {
padding: 15px 20px;
color: #fff;
background-color: orange;
position: absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-transition: all .5s ease-in .2s;
transition: all .5s ease-in .2s;
}
.wrapper div:hover {
background-color: red;
border-radius: 10px;
}
2,animation和Keyframes
(1),Keyframes简介
Keyframes
被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”
开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
在一个“@keyframes”中的样式规则可以由多个百分比构成的,如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果。
经验与技巧:在@keyframes中定义动画名称时,其中0%和100%还可以使用关键词from和to来代表,其中0%对应的是from,100%对应的是to。
示例:在CSS编辑器的第1行创建一个动画名叫“changecolor”,在“0%”时背景色为red,在20%时背景色为blue,在40%背景色为orange,在60%背景色为green,在80%时背景色yellow,在100%处时背景色为red。
css:
@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
div:hover {
animation: changecolor 5s ease-out .2s;
}
(2),animation-name
animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致(区分大小写
),如果不一致将不具有任何动画效果。
注意:none为默认值,当值为 none 时,将没有任何动画效果,这可以用于覆盖任何动画
。
(3),animation-duration
设置动画时间
(4),animation-timing-function
设置动画播放方式
(5),animation-delay
设置动画播放延迟时间
(6),animation-iteration-count
animation-iteration-count属性主要用来定义动画的播放次数。
1、其值通常为整数,但也可以使用带有小数的数字,其默认值为1,这意味着动画将从开始到结束只播放一次。
2、如果取值为infinite
,动画将会无限次的播放。
(7),animation-direction
animation-direction属性主要用来设置动画播放方向,其语法规则如下:
其主要有两个值:normal、alternate
1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放;
2、另一个值是alternate,他的作用是,动画播放在第偶数
次向前
播放,第奇数
次向反方向
播放。
(8),animation-play-state
animation-play-state属性主要用来控制元素动画的播放状态。
参数:
其主要有两个值:running
和paused
。
其中running是其默认值,主要作用就是类似于音乐播放器一样,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。另外如果暂停了动画的播放,元素的样式将回到最原始设置状态。
例如,页面加载时,动画不播放。代码如下:
animation-play-state:paused;
示例:调用定义的动画“around”,围着正方形内边境滚动
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div><span></span></div>
</body>
</html>
css:
@keyframes around{
0% {
transform: translateX(0);
}
25%{
transform: translateX(180px);
}
50%{
transform: translate(180px, 180px);
}
75%{
transform:translate(0,180px);
}
100%{
transform: translateY(0);
}
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
}
div span {
display: inline-block;
width: 20px;
height: 20px;
background: orange;
border-radius: 100%;
animation:around;
animation-duration: 10s;
animation-timing-function: ease;
animation-delay: 1s;
animation-iteration-count:infinite;
animation-play-state:paused;
}
div:hover span {
animation-play-state:running;
}
(9),animation-fill-mode
属性值 | 效果 |
---|---|
none | 默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处 |
forwards | 表示动画在结束后继续应用最后的关键帧的位置 |
backwards | 会在向元素应用动画样式时迅速应用动画的初始帧 |
both | 元素动画同时具有forwards和backwards效果 |
示例:元素背景色从红色变成蓝色。
@keyframes redToBlue{
from{
background: red;
}
20%{
background:green;
}
40%{
background:lime;
}
60%{
background:yellow;
}
to{
background:blue;
}
}
div {
width: 200px;
height: 200px;
background: pink;
margin: 20px auto;
animation-name:redToBlue;
animation-duration: 5s;
animation-timing-function: ease;
animation-delay: 0.5s;
animation-fill-mode: backwards ;
}
背景色pink,动画效果:红——>绿——>青——>黄——>蓝
属性 效果
none
pink——>红——>绿——>青——>黄——>蓝——>pink
forwards
pink——>红——>绿——>青——>黄——>蓝
backwards
红——>绿——>青——>黄——>蓝——>pink
both
红——>绿——>青——>黄——>蓝