您的位置:首页 - 网页特效 - 正文
CSS3三种动画相关属性的介绍和示例
CSS 3新增了变形和动画相关的模块,可以更方便地制作更加强大的页面动画。
CSS3新增的动画相关属性包括transform、transition和animation。另外transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。本文介绍transform的2D变形动画。

Transform用于定义2D变形动画,通过指定它的变形函数,即可实现对HTML元素的变形。

Transform属性中rotate()属性值用来定义2D旋转动画,在参数中可以规定角度。请查看示例:https://hovertree.com/front/css3/1/
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>2D旋转动画-何问起</title>
<style>
div.hovertreeTtransform{
width:100px;
height:100px;background:red;color:white;margin:25px;
}
div.hovertreeTtransform:hover{
transform:rotate(60deg)/*设置2D旋转动画*/
}
</style>
</head>
<body>
<div class="hovertreeTtransform">2D 旋转 <br />by 何问起<br />光标移到这里</div>
<footer><a href="https://hovertree.com/">首页</a> <a href="https://hovertree.com/h/bjag/4y7erj38.htm">返回</a></footer>
</body>
</html>
Transform属性中属性值scale(x,y)用来定义2D缩放动画,x表示X轴方向上的缩放,y表示Y轴方向的缩放。请体验一下示例:https://hovertree.com/front/css3/1/1.htm代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>2D缩放动画-何问起</title>
<style>
div.hovertreeTtransform{
width:100px;
height:100px;background:red;color:white;margin:50px;
}
div.hovertreeTtransform:hover{
/*沿X轴放大到1.5倍,沿Y轴缩小到1.8倍*/
transform:scale(1.5,0.8);/*设置2D缩放动画*/
}
a{color:blue;}
</style>
</head>
<body>
<div class="hovertreeTtransform">2D 缩放 <br />by 何问起<br />光标移到这里</div>

<footer><a href="https://hovertree.com/">首页</a> <a href="https://hovertree.com/h/bjag/4y7erj38.htm">返回</a></footer>
</body>
</html>
Transform属性中属性值translate(x,y)定义2D移动动画,x表示X轴方向上的移动,y表示Y轴方向的移动。请体验示例:https://hovertree.com/front/css3/1/2.htm
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>2D移动动画-何问起</title>
<style>
div.hovertreeTtransform{
width:100px;
height:100px;background:red;color:white;margin:50px;
}
div.hovertreeTtransform:hover{
/*沿X轴移动60px,沿Y轴缩移动30px*/
transform:translate(60px,30px);/*设置2D缩放动画*/
}
a{color:blue;}
</style>
</head>
<body>
<div class="hovertreeTtransform">2D 移动 <br />by 何问起<br />光标移到这里</div>

<footer><a href="https://hovertree.com/">首页</a> <a href="https://hovertree.com/h/bjag/4y7erj38.htm">返回</a></footer>
</body>
</html>
Transform属性中属性值skew(x,y)定义2D倾斜动画,x表示X轴方向上的倾斜,y表示Y轴方向的倾斜。
请查看示例:https://hovertree.com/front/css3/1/3.htm
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>2D倾斜动画-何问起</title>
<style>
div.hovertreeTtransform{
width:100px;
height:100px;background:red;color:white;margin:20px;
}
div.hovertreeTtransform:hover {
transform: skew(340deg,355deg); /*设置2D倾斜动画*/
}
a{color:blue;}
</style>
</head>
<body>
<div class="hovertreeTtransform">2D 倾斜 <br />by 何问起<br />光标移到这里</div>

<footer><a href="https://hovertree.com/">首页</a> <a href="https://hovertree.com/h/bjag/4y7erj38.htm">返回</a></footer>
</body>
</html>
下面来使用transform属性中的2D转换来实现一个复杂的变形动画。请查看示例:https://hovertree.com/front/css3/1/4.htm
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>使用CSS3变形动画设计出脸部-何问起</title>
<style>
#hovertreeBig {
border: 1px solid blue;
width: 700px;
height: 550px;
cursor: pointer;
}

#hovertreeBox {
border: 1px solid blue;
width: 500px;
height: 500px;
margin: 30px auto;
transform: scale(0.8,1);
}

#hovertreeSmall {
position: absolute;
left: -150px;
}

#hovertreeBox #hovertreeSmall div {
width: 50px;
height: 50px;
background: red;
font-size: 30px;
color: white;
margin: 15px 15px;
text-align: center;
line-height: 100px;
}

#hovertreeBig:hover #hovertreeBox {
border-radius: 180px 180px 240px 240px;
}
/*动态眉毛*/
#hovertreeBig:hover #hovertreeBox #hovertreeSmall div:first-of-type {
transform: translate(260px,130px) rotate(95deg) scale(0.1,2.5);
-ms-transform: translate(260px,130px) rotate(95deg) scale(0.1,2.5);
border-radius: 10% 50% 10% 10%;
}

#hovertreeBig:hover #hovertreeBox #hovertreeSmall div:nth-of-type(2) {
transform: translate(460px,65px) rotate(85deg) scale(0.1,2.5);
-ms-transform: translate(460px,65px) rotate(85deg) scale(0.1,2.5);
border-radius: 10% 10% 50% 10%;
}
/*动态眼睛*/
#hovertreeBig:hover #hovertreeBox #hovertreeSmall div:nth-of-type(3) {
transform: translate(260px,35px) scale(2.5,0.8);
-ms-transform: translate(260px,35px) scale(2.5,0.8);
border-radius: 50% 40% 40% 50%;
}

#hovertreeBig:hover #hovertreeBox #hovertreeSmall div:nth-of-type(4) {
transform: translate(460px,-30px) scale(2.5,0.8);
-ms-transform: translate(460px,-30px) scale(2.5,0.8);
border-radius: 40% 50% 50% 40%;
}
/*动态鼻子*/
#hovertreeBig:hover #hovertreeBox #hovertreeSmall div:nth-of-type(5) {
transform: translate(360px,-10px) scale(1.3,2);
-ms-transform: translate(360px,-10px) scale(1.3,2);
border-radius: 45% 45% 20% 20%;
}
/*动态嘴*/
#hovertreeBig:hover #hovertreeBox #hovertreeSmall div:last-of-type {
transform: translate(360px,40px) scale(3,0.8);
-ms-transform: translate(360px,40px) scale(3,0.8);
border-radius: 30% 30% 50% 50%;
}
</style>
</head>
<body>
<h2>CSS3变形动画,请移动光标进出方框</h2>
<div id="hovertreeBig">
<nav id="hovertreeBox">
<div id="hovertreeSmall">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</nav>
</div>
<script src="/themes/sy/gggg300x250a.js"></script>
<footer><a href="https://hovertree.com/">首页</a> <a href="https://hovertree.com/h/bjag/4y7erj38.htm">返回</a></footer>
</body>
</html>

矩阵动画可以通过设置transform属性值为matrix()函数来实现。matrix()函数用于定义页面元素在二维空间中的矩阵变形动画。语法如下:
transform: matrix(a,b,c,d,x,y);
前面介绍的旋转、拉伸、位移、倾斜这些变形效果,都可以看作是矩阵变形的例子。
● 旋转rotate(A):相当于矩阵变形matrix(cosA,sinA,-sinA,cosA,0,0)。
● 移动translate(dx,dy):相当于矩阵变形matrix(1,0,0,1,dx,dy)。
 缩放scale(sx,sy):相当于矩阵变形matrix(sx,0,0,sy,0,0)。
● 倾斜skew(B):相当于矩阵变形matrix(1,tan(By),tan(Bx),1,0,0),其中tan(By)是Y轴方向上的倾斜。
关于详细的矩阵变形原理,需要参考数学相关的知识。
收藏 列表

评论: