概述：
- 设计2D变换
- 设计3D变换
- 设计过渡动画
- 设计帧动画
- 使用CSS3动画功能设计页面特效样式
1，设计2D变换
transform:none|<transform-function>[<transform-function>]*;- transform属性的初始值是none，适用于块元素和行内元素
- <transform-function>设置变换函数。可以是一个或多个变换函数列表。transform-function函数包括matrix(),translate(),scale(),scaleX(),scaleY(),rotate(),skewX(),skewY(),skew()等。
- matrix()：矩阵变换
- translate()：移动元素对象
- scale()：缩放元素对象
- rotate()：旋转元素对象
- skew()：倾斜元素对象
1.1 定义旋转
rotate(<angle>)<style>
div{
width:200px;
height:10px;
background-color:red;
border-radius:5px;
position:absolute;
top:30%;
left:30%;
}
div:hover{
transform:rotate(-90deg);
}
</style>
<div></div>
1.2 定义缩放
scale(<number>[,<number>])scale(1.5)1.3 定义移动
translate(<translation-value>[,<translation-value>]) div:hover{
transform:translate(20px,20px);
}1.4 定义倾斜
skew(<angle>[,<angle>]) transform:skew(30deg,-10deg);
1.5 定义矩阵
1.6 定义变换原点
transform-origin:transform-origin:0 0; //以元素对象左上角为原点2，设计3D变换
3D位移：translateZ()和translate3d()
3D旋转：rotateX(),rotateY(),rotateZ(),rotate3d()
3D缩放：scaleZ() scale3d()
3D矩阵：matrix3d()
2.1 定义位移
translate3d(tx,ty,tz)<html>
<head>
<meta charset="utf-8">
<style>
.stage{ /*设置舞台，定义观察者距离*/
width:600px;height:200px;
border:solid 1px red;
perspective:1200px;
}
.container{ /*创建3维空间*/
transform-style:preserve-3d;
}
img{width:120px;}
img:nth-child(2){
transform:translate3d(30px,30px,200px);
}
</style>
</head>
<body>
<div class="stage">
<div class="container"><img src="images/1.jpg" /><img src="images/1.jpg" /></div>
</div>
</body>
</html>
2.2 定义缩放
scale3d(sx,sy,sz)取值说明如下：
sx： 横向缩放比例 sy：纵向缩放比例， sz：Z轴缩放比例
<html>
<head>
<meta charset="utf-8">
<style>
.stage{ /*设置舞台，定义观察者距离*/
width:600px;height:200px;
border:solid 1px red;
perspective:1200px;
}
.container{ /*创建3维空间*/
transform-style:preserve-3d;
}
img{width:120px;}
img:nth-child(2){
transform:scale3d(2,3,5);
}
</style>
</head>
<body>
<div class="stage">
<div class="container"><img src="images/1.jpg" /><img src="images/1.jpg" /></div>
</div>
</body>
</html>
2.3 定义旋转
rotateX(a)
rotateY(a)
rotateZ(a)rotate3d(x,y,z,a)rotate3d(x,y,z,a)取值说明如下：
- x：是一个0到1之间的取值，主要用来描述元素围绕X轴旋转的矢量值
- y：
- z：
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
<html>
<head>
<meta charset="utf-8">
<style>
.stage{ /*设置舞台，定义观察者距离*/
width:600px;height:200px;
border:solid 1px red;
perspective:1200px;
}
.container{ /*创建3维空间*/
transform-style:preserve-3d;
}
img{width:120px;}
img:nth-child(2){
transform:rotate3d(1,0,1,45deg);
}
</style>
</head>
<body>
<div class="stage">
<div class="container"><img src="images/1.jpg" /><img src="images/1.jpg" /></div>
</div>
</body>
</html>
3，设计过渡动画
CSS3使用transition属性定义过渡动画，目前已获得所有浏览器的支持。
3.1 设置过渡属性
transition-property:none|all|[<IDENT>][',',<IDENT>]*;- none：表示没有元素
- all：默认值，表示针对所有元素，包括：before和：after元素
- IDENT：指定CSS属性列表。几乎所有色彩，大小和位置等相关的CSS属性，包括许多新添加的属性，都可以应用过渡，如CSS3变换中的放大，缩小，旋转，斜切，渐变等。
3.2 设置过渡时间
transition-duration:<time>[,<time>]*;初始值为0，适用于所有元素。在默认情况下，动画过渡时间为0秒，所以当指定元素动画时，会看不到过渡的过程，直接看到结果。
<style>
div{
margin:10px auto;height:80px;
background:red;
border-radius:12px;
box-shadow:2px 2px 2px #999;
}
div:hover{
background-color:blue;
transition-property:background-color;
transition-duration:2s;
}
</style>
<body>
<div></div>
</body>
3.3 设置延迟时间
transition-delay:<time>[,<time>]<style>
div{
margin:10px auto;height:80px;
background:red;
border-radius:12px;
box-shadow:2px 2px 2px #999;
}
div:hover{
background-color:blue;
transition-property:background-color;
transition-delay:1s;
transition-duration:2s;
}
</style>
<body>
<div></div>
</body>
3.4 设置过渡动画类型
transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out- ease：平滑过渡
- linear：线性过渡
- ease-in：由慢到快
- ease-out：由快到慢
- ease-in-out：由慢到快再到慢
3.5 设置触发方式
CSS伪类: link visited hover active focus
javascript事件： click focus mousemove mouseover mouseout
4，设计帧动画
CSS3使用animation属性定义帧动画
4.1 设置关键帧
CSS3使用@keyframes定义关键帧。具体用法如下：
@keyframes animationname{
keyframes-selector{
css-styles;
}
}其中参数说明如下：
- animationname：定义动画的名称
- keyframes-selector：定义帧的时间未知，也就是动画时长的百分比，合法的值包括0~100%,from,to
- css-styles：表示一个或多个合法的CSS样式属性
<html>
<head>
<meta charset="utf-8">
<style>
#wrap{ /*定义运动轨迹包含框*/
position:relative; /*定义定位包含框*/
border:solid 1px red;
width:250px;
height:250px;
}
#box{ /*定义运动小盒的样式*/
position:absolute;
left:0;
top:0;
width:50px;
height:50px;
background:#93FB40;
border-radius:8px;
box-shadow:2px 2px 2px #999;
/*定义帧动画：动画名称为ball，，动画时长5s，动画类为匀速*/
animation:ball 5s linear infinite;
}
@keyframes ball{
0%{left:0;top:0;}
25%{left:200px;top:0;}
50%{left:200px;top:200px;}
75%{left:0;top:200px;}
100%{left:0;top:0;}
}
</style>
</head>
<body>
<div id="wrap">
<div id="box"></div>
</div>
</body>
</html>
4.2 设置动画属性
1，定义动画名称
animation-name:none|IDENT[,none|IDENT]*;2，定义动画时间
animation-duration:<time>3，定义动画类型
animation-timing-function
4，定义延迟时间
animation-delay
5,定义播放次数
animation-iteration-count
6，定义播放方向
animation-direction
7，定义播放状态
animation-play-state：paused | running
8，定义播放外状态
animation-fill-mode:none|forwards|backgrounds|both
5，实现一个2D盒子
<!doctype html>
<html>
<head>
<title>这是一个2D盒子</title>
<meta charset="utf-8">
<style>
body{padding:20px 0 0 100px;}
.side{
height:100px;width:100px;
position:absolute;
font-size:20px;font-weight:bold;line-height:100px;
text-align:center;color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
text-transform:uppercase;
}
.top{
background:red;
transform:rotate(-45deg) skew(15deg,15deg);
}
.left{
background:blue;
transform:rotate(15deg) skew(15deg,15deg) translate(-50%,100%);
}
.right{
background:yellow;
transform:rotate(-15deg) skew(-15deg,-15deg) translate(50%,100%);
}
</style>
</head>
<body>
<div class="side top">Top</div>
<div class="side left">Left</div>
<div class="side right">Right</div>
</body>
</html>
示例：3D盒子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D</title>
<style>
.stage{
width:300px;height:300px;margin:100px auto;position:relative;
perspective:300px;
}
.container{
transform-style:preserve-3d
}
.side{
background:rgba(255,0,0,0.3);
border:1px solid red;
font-size:60px;font-weight:bold;color:#fff;text-align:center;
height:196px;line-height:196px;width:196px;
position:absolute;
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
text-transform:uppercase;
}
.front{
transform:translateZ(100px);
}
.back{
transform:translateZ(-100px);
}
.left{
transform:rotateY(-90deg) translateZ(100px);
}
.right{
transform:rotateY(90deg) translateZ(100px);
}
.top{
transform:rotateX(90deg) translateZ(100px);
}
.bottom{
transform:rotateX(-90deg) translateZ(100px);
}
</style>
</head>
<body>
<div class="stage">
<div class="container">
<div class="side front">前面</div>
<div class="side back">背面</div>
<div class="side left">左面</div>
<div class="side right">右面</div>
<div class="side top">顶面</div>
<div class="side bottom">底面</div>
</div>
</div>
</body>
</html>
示例：实现3D旋转盒子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D</title>
<style>
.stage{
width:300px;height:300px;margin:100px auto;position:relative;
perspective:300px;
}
.container{
transform-style:preserve-3d
}
.side{
background:rgba(255,0,0,0.3);
border:1px solid red;
font-size:60px;font-weight:bold;color:#fff;text-align:center;
height:196px;line-height:196px;width:196px;
position:absolute;
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
text-transform:uppercase;
}
.front{
transform:translateZ(100px);
}
.back{
transform:translateZ(-100px);
}
.left{
transform:rotateY(-90deg) translateZ(100px);
}
.right{
transform:rotateY(90deg) translateZ(100px);
}
.top{
transform:rotateX(90deg) translateZ(100px);
}
.bottom{
transform:rotateX(-90deg) translateZ(100px);
}
@keyframes spin{
0%{transform:rotateY(0deg)}
100%{transform:rotateY(360deg)}
}
.container:hover{
animation:spin 5s linear infinite;
}
</style>
</head>
<body>
<div class="stage">
<div class="container">
<div class="side front">前面</div>
<div class="side back">背面</div>
<div class="side left">左面</div>
<div class="side right">右面</div>
<div class="side top">顶面</div>
<div class="side bottom">底面</div>
</div>
</div>
</body>
</html>
扫一扫
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
