第八天
css3动画
1.变形（transform)
以下是transform 的属性值
translate(x,y) 定义2D转换，沿着X和Y轴移动元素。
即向x 或者 y 轴平移
可以带一个参数，带一个参数则是x轴平移，y轴不动
translateX(n) 定义2D转换，沿着X轴移动元素
translateY(n) 定义2D转换，沿着Y轴移动元素
scale(x,y) 定义2D缩放转换，改变元素的宽度和高度。
即缩放/放大
可以带一个参数，带一个参数则是x，y轴都放大或缩小这个倍数
可以使用小数,使用小数时，前面的0可以省略
scaleX(n) 定义2D缩放转换，改变元素的宽度
scaleY(n) 定义2D缩放转换，改变元素的高度
rotate(angle) 定义2D旋转，在参数中规定角度
角度可以使用负数，范围（-360deg-360deg)
rotateX是3D旋转，往往和perspective结合使用，见下一点
skew(x-angle,y-angle) 定义2D倾斜转换,沿着X轴和Y轴
即扭曲。
可带一个参数，带一个参数时候，x方向扭曲，y方向不扭曲。
skew(x-angle) 定义2D倾斜转换,沿着X轴
skew(Y-angle) 定义2D倾斜转换,沿着Y轴
matrix(n,n,n,n,n,n)定义2D转换，使用6个值的矩阵
每次旋转和扭曲都会产生一个新矩阵，最终形成得多个矩阵要做乘法运算.
如果对一个元素同时有旋转、扭曲、缩放和位移，这里需要用到多个矩阵相乘，要优先考虑旋转和缩放！！！！
tip：厂商兼容前缀：
谷歌/苹果 -webkit-
火狐 -moz-
IE -ms-
欧朋 -o-
需求：将div右移100px，下移200px，旋转30度，x轴缩放1.5倍，y轴缩放2倍。
两种方法的大致效果如下：
2.transform-origin :调整元素的基点
属性值：
x-axis:定义视图被置于X轴的何处。
可能的值：left，center，right，length,%
y-axis:定义视图被置于Y轴的何处
可能的值：top,center,bottom,length,%
z-axis:定义视图被置于Z轴的何处
可能的值:length
eg:
transform-origin: left top;
3.perspective
让子元素获得透视效果。
perspective:number|none;
主流浏览器都不支持，谷歌需要加-webkit-.或在后面加px长度单位
用法：
!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>Document</title>
<style>
.demo {
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid #ccc;
position: relative;
padding: 20px;
perspective: 100px;
}
.div1 {
width: 200px;
height: 300px;
border: 1px solid #f0f;
background-color: #0ff;
position: absolute;
left: 50%;
margin-left: -100px;
transform: rotateX(40deg);
}
</style>
</head>
<body>
<div class="demo">
<div class="div1"></div>
</div>
</body>
</html>
4.transform-style
规定如何在3D空间中呈现被嵌套的元素
注释：该属性必须和transform属性一同使用
语法:transform-style:flat|prespective
flat:默认值，子元素不再保留3d位置
preserve-3d:子元素报留3d位置。
例子：
5.rotate-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">
</style>
<title>Document</title>
<style>
.container {
position: relative;
perspective: 1000px;
width: 200px;
height: 200px;
margin: 200px auto;
}
.container div {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #000;
text-align: center;
}
.pre {
background: rgba(43, 255, 0, 0.5);
transform: rotateY(0) translateZ(200px);
}
.back {
background: rgba(43, 255, 0, 1);
transform: rotateY(180deg) translateZ(0);
}
.left {
left: -100px;
background: rgb(214, 10, 170);
transform: rotateY(-90deg) translateX(100px);
}
.right {
left: 100px;
background: rgb(214, 211, 10);
/* 因为从中心点开始旋转的 所以要往外移动100px */
transform: rotateY(90deg) translateX(-100px);
}
.top {
top: 100px;
transform: rotateX(90deg) translateY(100px);
background-color: rgb(49, 12, 211);
}
.bottom {
bottom: 100px;
transform: rotateX(-90deg) translateY(-100px);
background-color: rgb(6, 15, 92);
}
</style>
</head>
<body>
<div class="container">
<div class="pre">1</div>
<div class="back">2</div>
<div class="left">3</div>
<div class="right">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</body>
</html>
实际效果：
6. 过渡动画
1.常规用法：
transition-property;
transition-duration
transition-timing-function
transition-delay
2.简洁（复合）用法：
transition:property-name-list|all duration time-function delay;
a.可以使用的属性有：
1)颜色
color background-color border-color outline-color
2)位置
background-position:left right top bottom
3)长度
max-height min-height max-width min-width
height width
border-width margin pading outline-width
outline-offset font-size line-height
text-indent vertical-align border-spacing
letter-spacing word-spacing
4)数字
opacity visibility z-index font-weight zoom
5)组合
text-shadow transform box-shadow clip
6)其他
gradient
b)duration:动画持续时间 ，一般以秒（S)或毫秒（ms）为单位
c) timing-function: 动画函数
1) linear:匀速
2) ease :变速（先慢后快，最后再慢）
3）ease-in ：变速（由慢到快）
4）ease-out : 变速（由快到慢）
5）ease-in-out :(慢速开始，慢速结束)
6）cubic-bezier(n,n,n,n):自行设定变速,n的值在0-1之间
d) delay : 动画延时时间，一般以秒（S）或毫秒（ms）为单位
tips：
如果没学js的button，可以用hover暂时代替一下
用法：
transition: all 2s ease 500ms;
7.帧 动 画
步骤1： 设置关键帧
a)如果只有2个关键帧：
@keyframes 动画名{
0%:{样式表}
100%:{样式表}
}
或：
@keyframes 动画名{
from:{样式表}
to: {样式表}
}
b）如果有多个关键帧
@keyframes 动画名 {
0%:{样式表}
30%:{样式表}
…
100%:{样式表}
}
注意：这里的百分比一般是升序，可以是0%-100%之间的任意值，也可以是倒叙。
步骤二 ： 实施动画
a）常规用法
animation-name:
来自于@keyframes定义的动画名 —无默认值
animation-duration：
动画的持续时间，一般以秒（s)或毫秒（ms)为单位----默认值0
animation-timing-function：
动画函数：
1）linear:匀速 ----默认值匀速
2）ease: 变速（先慢后快，最后再慢）
3）ease-in:变速（由慢到快）
4)ease-out:变速（由快到慢）
5）ease-in-out:变速（慢速开始，慢速结束）
6)cubic-bezier(n,n,n,n):自行设置速度，n的值在0-1之间。
animation-delay:
动画延迟时间，一般以秒（s）或者毫秒（ms）为单位
---------默认值不延迟
animation-iteration-count:
动画重复的次数 ---------默认值0次
1)number:设定重复播放的次数
2）infinite:一直循环播放
animation-direction :
动画播放完后是反向播放
1）normal:不反向 -----默认值不反向
2）alternate: 反向
animation-play-state :
设置播放|暂停
1)paused : 暂停播放
2)running :播放 （默认值）
b) 简洁用法
animate : name duration timing-function delay
iteration-count direction
tips:
animate-play-state 是单独设置的
如果没有用到js，可以暂时使用hover 实现类似的效果
最好使用绝对相对定位以便于使用 left等操作。
也可以使用transform 里的 translate(平移实现2d或者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>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.container {
position: relative;
width: 100%;
height: 800px;
border: 1px solid #eee;
}
@keyframes moverotate {
0% {
left: 0;
transform: rotate(0deg);
}
25% {
left: 200px;
transform: rotate(90deg);
}
50% {
top: 200px;
transform: rotate(180deg);
}
75% {
left: 0px;
transform: rotate(270deg);
}
100% {
top: 0px;
transform: rotate(360deg);
}
}
.div1 {
margin: 200px auto;
position: absolute;
width: 200px;
height: 200px;
border: 2px solid skyblue;
box-shadow: 2px 2px 2px #ccc;
border-radius: 50%;
background: url(img/circle.jpg) skyblue;
background-size: 100% 100%;
animation: moverotate 5s linear 100ms infinite;
}
.pause:hover+.div1 {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.run:hover+.div1 {
animation-play-state: running;
-webkit-animation-play-state: running;
}
button {
width: 100px;
height: 100px;
margin: 100px auto;
z-index: 5;
}
</style>
</head>
<body>
<div class="container">
<button class="pause">暂停</button>
<button class="run">开始</button>
<div class="div1"></div>
</div>
</body>
</html>
4044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
