动画电影效用
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 明确规定过渡阶段效用何时能已经开始。预设是0transition-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>
目录：
