动画效果
CSS3出现之前 前端一般采用Flash动画或JavaScript来制作动画帧动画:通过一帧一帧的动画按照固定顺序和速度播放 如电影胶片
当CSS3出现之后，我们就开始用过渡属性来进行动画的制作了，name过渡属性有多好用呢，让我们拭目以待吧~
先来了解下过渡属性：
属性名：transition
作用：在不使用Flash动画或JavaScript的情况下，使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指),那么A和B之间就可以实现平滑的过渡的动画效果。为了方便看效果,我们使用:hover切换状态。
语法格式 transition: 过渡属性 过渡时间 运动曲线 延迟时间;
属性：
transition 简写属性,用于在一个属性中设置四个过渡属性transition-property 规定应用过渡的CSS属性的名称transition-duration 定义过渡效果花费的时间。默认是0transition-timing-function 规定过渡效果的时间曲线。默认是"ease"transition-delay 规定过渡效果何时开始。默认是0
transition-property 过渡属性
none 表示没有属性过渡all 表示所有变化的属性都过渡属性名 使用具体的属性名,多个属性名中间逗号分隔
transition-duration 与 transition-delay
过渡时间：以s秒为单位延时时间：以s秒为单位。0s也必须加单位
transition-timing-function 时间曲线
linear 规定以相同的速度开始至结束的过渡效果ease 规定慢速开始,然后变快,然后慢速结束的过渡效果ease-in 规定以慢速开始的过渡效果ease-out 规定以慢速结束的过渡效果cubic- bezier 在 cubic-beizier 函数中定义自己的值。x1、x2取是0至1之间的数值,y1、y2取值任意,四个数值表示拉扯的点的两个坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过度属性</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
margin: 100px auto;
width: 100px;
height: 100px;
background-color: pink;
/* 过渡属性: 属性 过渡时间 时间曲线 延迟时间 */
/* transition: all 1s ease; */
transition: all 1s cubic-bezier(0.14, 0.08, 0, 0.99) 0.1s;
}
.box:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Internet Explorer 10 、 Firefox 、Chrome 以及 Opera 支持transition 属性
Safari 需要前缀 -webkit-
注意：Internet Explorer 9 以及更早的版本 不支持transition 属性
2D转换-位移
属性名：transform
作用:对元素进行移动、缩放、转动、拉长或拉伸 配合过渡和即将学习的动画知识,可以取代大量，之前只能靠Flash才可以实现的效果
属性值:多种转换方法的属性值,可以实现不同的转换效果
位移 translate()
transform的属性值为translate()时 可以实现位移效果
书写语法
transform:translate(x,y) x,y分别为水平和垂直方向位移的距离,可以为px值或百分比,区分正负transform:translate(x) 只有一个数值,表示水平方向的位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转换位移</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 234px;
height: 248px;
border: 1px solid #000;
margin: 100px auto;
}
.box img {
transform: translate(100px,50px);
transform: translate(-100px,-50px);
transform: translate(50px);
}
.box2 {
position: relative;
width: 500px;
height: 100px;
margin: 10px;
border: 1px solid;
}
p {
/* 定位居中方式 */
position: absolute;
width: 100px;
height: 100px;
left: 50%;
/* margin-left: -50px; */
transform: translate(-50%);
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<img src="images/meng.jpg" alt="">
</div>
<div class="box2">
<p></p>
</div>
</body>
</html>
图片利用translate（）实现了位移图片利用更万金油的方式实现了居中
上面我们看到，图片的位移是显而易见的，但这不是我们这个案例的重点，我们发现了一种新的居中方式，以前我们用父相子绝方式水平定位50%再配合子元素设置水平的负数外边距（自身宽度的一半）来做到居中，但是元素宽度不同每次都要重新调数据。现在我们可以通过transform:translate(-50%); 代替负外边距的步骤，代码的泛用性更广了~
2D转换-缩放
缩放 scale()
transform 的属性值为 scale()时 可以实现元素的缩放效果
书写语法:
transform:scale(x,y) x,y分别为改变元素的宽度和高度的倍数transform:scale(n) 只有一个值,表示宽度和高度同时缩放n倍transform:scaleX(n) 改变元素的宽度transform:scaleY(n) 改变元素的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转换-缩放</title>
<style>
.box1{
width: 200px;
height: 200px;
margin: 200px auto;
background-color: pink;
transition: all .5s;
}
.box1:hover{
/* transform:scale(1.5); */
/* transform:scale(1.5, 2); */
/* transform:scaleX(2); */
transform:scaleY(2);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
2D转换-旋转
transform属性值设置为rotate()时,实现元素的旋转
书写语法:
transform:rotate(数字deg)
其中,deg为度数单位 正数表示顺时针旋转 负数表示逆时针旋转 2D的旋转只有一个属性值
注意：元素旋转后,坐标轴也跟着发生转变
因此,多个属性值同时设置给transform时,书写顺序不同导致的转换效果有差异
2D转换-倾斜
倾斜skew()
transform 属性值设置为skew()时 实现元素的倾斜
书写语法
transform:skew(数字deg,数字deg)
两个属性值分别表示水平和垂直方向的倾斜角度 属性值可以为正可以为负 第二个数值不写默认为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倾斜 skew(</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
margin: 200px auto;
}
.box1 {
width: 200px;
height: 200px;
background-color: pink;
transition: all 1s;
}
.box:hover .box1 {
transform:skew(89deg, 89deg);
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
嘿嘿，上图的倾斜角度有点刁钻，反正水平倾斜就是左右边倾斜，垂直倾斜就是上下边倾斜，倾斜角度接近90deg就会逐渐变成一条直线，出现水平或者垂直无限大的情况，所以如果水平和垂直都接近90deg，就会让面积扩展成无限大（在水平垂直都过45deg时，图形会翻转，然后逐渐随着倾斜角度的提升而变大）
2D转换-基准点
transform-origin属性
作用：设置调整元素的水平和垂直方向圆点的位置
调整元素的基准点
属性值:包含两个,中间使用空格分隔
x 定义X轴的原点在何处 可能的值:left、center、right、像素值、百分比
y 定义Y轴的原点在何处 可能的值:top、center、bottom、像素值、百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基准点</title>
<style>
.box1 {
width: 200px;
height: 200px;
margin: 200px auto;
background-color: pink;
transform-origin: left top;
transition: all 1s;
}
.box1:hover{
transform:rotate(45deg);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
上图我们把旋转的基准点换成了左上角，所以盒子就以左上角为圆心旋转了
我们再来做个一个卡包特效
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡包特效</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 225px;
height: 150px;
margin: 300px auto;
background-color: goldenrod;
}
p {
width: 225px;
height: 150px;
position: absolute;
left: 0;
top: 0;
transition:all 1s ease-in-out;
transform-origin:right top;
}
p img {
width: 225px;
height: 150px;
}
.box:hover :nth-child(1) {
transform: rotate(0deg);
}
.box:hover :nth-child(2) {
transform: rotate(60deg);
}
.box:hover :nth-child(3) {
transform: rotate(120deg);
}
.box:hover :nth-child(4) {
transform: rotate(180deg);
}
.box:hover :nth-child(5) {
transform: rotate(240deg);
}
.box:hover :nth-child(6) {
transform: rotate(300deg);
}
</style>
</head>
<body>
<div class="box">
<p><img src="images/1.jpg" alt=""></p>
<p><img src="images/2.jpg" alt=""></p>
<p><img src="images/3.jpg" alt=""></p>
<p><img src="images/4.jpg" alt=""></p>
<p><img src="images/5.jpg" alt=""></p>
<p><img src="images/6.jpg" alt=""></p>
</div>
</body>
</html>
接下来我们的2D时代就结束了，开始进入3D时代~
3D转换
transform 属性不止能实现2D转换 也可以制作3D立体转换效果
比普通的x、y轴组成的平面效果多了一条z轴
那么如何在平面上看出3D的感觉呢，下面这个属性是必不可少的！
透视
电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的
透视可以将一个2D平面 在转换的过程当中 呈现3D效果
透视特点:近大远小
注意:并非任何情况下需要透视效果,根据开发需要进行设置 如果需要展示z轴的变化,则设置透视效果
属性名:perspective
作用:设置在z轴的视线焦点的观察位置,从而实现3D查看效果
属性值:像素值,数值越大 观察点距离z轴原点越远 图形效果越完整且接近原始尺寸
注意:透视属性需要设置给3D变化元素的父级
3D旋转
3D旋转比2D旋转更复杂 需要分别对三个方向的旋转角度值:
rotateX(angle) 定义沿着X轴的3D旋转rotateY(angle) 定义沿着Y轴的3D旋转rotateZ(angle) 定义沿着Z轴的3D旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D旋转</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
width: 450px;
height: 300px;
border: 1px solid black;
margin: 150px auto;
/* 透视(加在父元素上 ) */
perspective: 1000px;
}
.box img {
transition: all .5s;
}
.box:hover img{
/* 沿着X轴旋转 */
/* transform: rotateX(30deg); */
/* 沿着Y轴旋转 */
transform: rotateY(30deg);
/* 沿着Z轴旋转 */
/* transform: rotateZ(30deg); */
}
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" alt="">
</div>
</body>
</html>
沿着Y轴的旋转
3D位移
类似的 位移也可以分为是哪个方向移动
属性值:
translateX(x) 设置X轴的位移值translateY(y) 设置Y轴的位移值translateZ(z) 定义3D位移,设置Z轴的位移值属性值为像素值或百分比 正负表示位移方向 正值向对应轴正方向移动 负值向对应轴的负方向移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D位移</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
width: 450px;
height: 300px;
border: 1px solid black;
margin: 150px auto;
/* 透视(加在父元素上 ) */
perspective: 1000px;
}
.box img {
transition: all 1s;
}
.box:hover img{
/* transform: translateX(100px); */
/* transform: translateY(100px); */
/* transform: translateZ(100px); */
/* transform: translateZ(200px) rotate(360deg); */
/* transform: rotate(360deg) translateX(200px); */
/* transform: translateX(200px) rotate(360deg) ; */
transform: translateX(225px) rotateY(90deg) ;
}
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" alt="">
</div>
</body>
</html>
X轴和Y轴方向上的位移效果
3D正方体
transform-style属性 用于设置被嵌套的子元素在父元素的3D空间中显示,子元素会保留自己的3D转换坐标轴，这样才会让正方体的每一个面都在3D空间内转换，做成3D效果
属性值:
flat:所有子元素在2D平面内呈现
preserve-3D:保留3D空间
3D元素构建是指某个图形是由对个元素构成的 可以给这些元素的父元素设置
transform-style:perserve-3d 来使其变成一个真正的3D图形
一般来说,该属性设置给3D变换图形的父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D正方体</title>
<style>
.box {
width: 200px;
height: 200px;
/* border: 1px solid #000; */
margin: 150px auto;
}
.stage {
position: relative;
transform-style: preserve-3d;
perspective: 5000px;
width: 200px;
height: 200px;
/* border: 1px solid #000; */
transition: all 4s;
}
.stage div {
position: absolute;
width: 200px;
height: 200px;
font: bold 80px/200px "arial";
text-align: center;
}
.stage div:nth-child(1){
background-color: rgba(255,0,0,.5);
transform: translateZ(100px);
}
.stage div:nth-child(2){
background-color: rgba(0,255,0,.5);
transform: rotateX(90deg) translateZ(100px);
}
.stage div:nth-child(3){
background-color: rgba(0,0,255,.5);
transform: rotateY(90deg) translateZ(100px);
}
.stage div:nth-child(4){
background-color: rgba(255,255,0,.5);
transform: rotateX(90deg) translateZ(-100px);
}
.stage div:nth-child(5){
background-color: rgba(255,0,255,.5);
transform: rotateY(90deg) translateZ(-100px);
}
.stage div:nth-child(6){
background-color: rgba(0,255,255,.5);
transform:translateZ(-100px);
}
.stage:hover {
transform: rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="stage">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>
CSS3 动画
动画
CSS3中提供了自己的动画制作方法,这可以在许多网页中取代动画片、Flash动画以及JavaScript
CSS3动画制作分为两步:创建动画、绑定动画
创建动画
@keyframes规则
@keyframes规则用于创建动画
在@keyframes中规定某项CSS样式,就能创建由从一种样式逐渐变化为另外一种样式的效果
可以改变任意多的样式任意多次数
需要使用百分比来规定变化发生的时间,或用关键字"form"和"to",等同于0%和100%
0%是动画开始 100%是动画完成
书写方法
@keyframes 动画名称 {
动画过程,可以添加任意百分比处的动画细节
}
绑定动画
animation属性
需要将@keyframes 中创建的动画捆绑到某个选择器 否则不会产生动画效果
animation属性用于对动画效果进行捆绑
animation: 动画名称 过渡时间 速度曲线 动画次数 延迟时间;
animation-name 规定@keyframes 动画名称
animation-duration 规定动画完成一个周期所花费的秒或毫秒 默认是0
animation-timing-function 规定动画速度曲线 默认是"ease"
annimation-delay 规定动画何时开始 默认是0
animation-iteration-count; 规定动画被播放的次数 默认是1 infinity表示无限次播放
其中必须设置动画名称和过渡时间 其他属性值可以根据需求设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3动画</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 20px auto;
background-color: pink;
animation: move2 1s infinite;
}
@keyframes move1 {
/* 从头开始,最好保持跟默认样式和状态一致 */
from {
transform:translate(0)
} to {
transform:translate(150px);
}
}
/* 百分比定义动画细节 */
@keyframes move2 {
/* 从头开始,最好保持跟默认样式和状态一致 */
0% {
transform:translateY(0)
}
50% {
transform:translateY(150px);
}
100% {
transform:translateY(0)
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
目录：
