html--->动画
一、3D
1.1、含义：转换是使元素改变形状、尺寸和位置的一种效果。
1.2、兼容性：
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera,ie9仍然不支持 3D 转换 它只支持 2D 转换
1.3、3D 翻转方法：
rotateX(30deg)
rotateY(30deg)
rotate和rotateZ()效果一样
案例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #id{ 8 width: 100px; 9 height: 100px; 10 margin: 100px auto; 11 transition: 3s; 12 color: red; 13 border: 1px solid #000000; 14 } 15 #id:hover{ 16 transform: rotateX(180deg); /* 以x轴进行转动*/ 17 /* transform: rotateY(180deg); 以Y轴进行转动*/ 18 /* transform: rotateZ(180deg); 以Z轴进行转动和昨天讲的一样*/ 19 /* transform: rotate(180deg); 昨天讲的*/ 20 } 21 </style> 22 </head> 23 <body> 24 <div id="id"> 25 中华 26 </div> 27 </body> 28 </html>
1.4、3D位置移动 的3种写法 近大远小
第一种：transform: translate3d(30px,30px,800px)
第二种：transform:translateZ(800px) translateX(30px) translateY(30px);
第三种：transform:translateZ(800px) translate(30px,30px);
在2D的基础上多了1D (Z轴)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #box{ 8 width: 400px; 9 height: 100px; 10 margin: 100px auto; 11 position: relative; 12 /* perspective:500px; */ 13 transform-style:preserve-3d; 14 transform: rotateY(30deg); 15 transition: 5s; 16 } 17 #box1{ 18 width: 400px; 19 height: 100px; 20 background: #f00; 21 position: absolute; 22 transform: translateZ(50px) 23 } 24 #box2{ 25 width: 400px; 26 height: 100px; 27 background: #00f; 28 position: absolute; 29 transform: translateY(50px) rotateX(90deg); 30 } 31 #box:hover{ 32 transform: rotateX(90deg); 33 } 34 </style> 35 </head> 36 <body> 37 <div id = 'box'> 38 <div id = 'box1'></div> 39 <div id = 'box2'></div> 40 </div> 41 </body> 42 </html>
1.5、3D视距 perspective
元素要使用3D效果 需要perspective属性配合
方法1： div{perspective:200px;} 父级
方法2： transform:perspective(200px) translate3d(0,0,-50px);子级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#id{
width: 200px;
height: 200px;
margin: 100px auto;
perspective: 900px;
}
div {
width: 200px;
height: 200px;
background: #f00;
transition: 5s;
color: #fff;
/* perspective: 600px; */
}
#id:hover div{
/* transform: translate3d(30px,30px,500px); */
/* perspective:600px; */
/* transform:translateZ(800px) translate(30px,30px); */
/* transform:perspective(800px) translate3d(0,0,500px); */ //这个就需要放在子级上面了。
transform: translateZ(800px); 视距就是该物体距离你的距离 要和 /* perspective:600px; */相互使用，但是要放在在父级上面
} </style> </head> <body> <div id = 'id'> <div> divdivdiv </div> </div> </body> </html>
1.6、3D缩放翻转
scaleZ z轴缩放
transform-style:preserve-3d;(3D视角)
父框设置 perspective:1200px(3D视距)
transform-style:preserve-3d;(3D视角)
（子元素保持3D位置）
transform-origin:left/top/right/bottom
翻转位置
先位移后旋转
反转导航 立方
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #box { 8 width: 200px; 9 height: 200px; 10 margin: 100px auto; 11 perspective:300px; 12 transform-style:preserve-3d; 13 } 14 15 #box1 { 16 width: 200px; 17 height: 200px; 18 background: #f00; 19 transition: 5s; 20 color: #fff; 21 } 22 23 #box:hover #box1{ 24 /* transform: rotateX(80deg); */ 25 transform: rotateY(180deg); 26 } 27 </style> 28 </head> 29 <body> 30 <div id='box'> 31 <div id='box1'></div> 32 </div> 33 </body> 34 </html>
1.7、动画
重要：
在 @keyframes 中创建动画时，需要把它捆绑到某个选择器的动画属性上，否则不会产生动画效果
兼容性：
IExplorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframes 规则或 animation 属性
语法：
1 语法： 2 @keyframes name{ 3 from {background: yellow;} 4 to {background: green;} 5 to {background: red;} 6 } 7 0-100% 8 from（与 0% 相同） 9 to（与 100% 相同）
属性
1 动画属性 2 animation: (可以理解为循环过度动画效果) 3 animation-name: 动画名 4 animation-duration: 时间 默认0 5 animation-timing-function: 曲线 默认ease 6 linear 匀速 ease 慢快慢 7 ease-in 慢开始 ease-out 慢结束 8 ease-in-out 慢开始慢结束 9 cubic-bezier(0.4,1.8,0.4,0.5) 自定义贝兹尔曲线 10 animation-delay : 延时 默认0 11 animation-iteration-count: 播放次数 默认1 infinite 永远 12 animation-direction: 周期后是否倒放 13 normal 正常播放 14 reverse 动画反向播放 15 alternate 奇数正向偶数反向 16 alternate-reverse 奇数反向偶数正向 17 18 animation-play-state: 是否暂停 默认 running ，暂停 paused 19 animation-fill-mode: 动画结束后的状态 20 forwards 保持最后状态 21 backwards 动画开始状态 22 animation-timing-function:step-start; 23 steps 有两个参数 24 第一个肯定是分几步执行完 25 第二个有两个值 26 start 第一帧是第一步动画结束 27 end 第一帧是第一步动画开始 28 step-start：动画一开始就跳到 100% 直到周期结束 29 step-end：保持 0% 的样式直到周期结束 30 31 animation: name 5s linear 2s infinite alternate;
案例1：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #id{ 8 width: 100px; 9 height: 100px; 10 background-color: #A52A2A; 11 margin: 100px auto; 12 animation: text 5s; 13 } 14 @keyframes text{ 15 /* 开始 */ 16 from{ 17 background-color: #FF0000; 18 } 19 /* 到 什么结束 */ 20 to{ 21 background-color: #6495ED; 22 } 23 } 24 </style> 25 </head> 26 <body> 27 <div id="id"> 28 29 </div> 30 </body> 31 </html>
案例2：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 500px; 13 height: 500px; 14 border: 1px solid #6495ED; 15 position: relative; 16 } 17 p{ 18 width: 100px; 19 height: 100px; 20 background-color: #A52A2A; 21 position: absolute; 22 /* 第三个参数 延时 */ 23 /* animation: move 3s linear 3s infinite; */ 24 /* 第二个参数是匀速的意思 */ 25 animation: move 3s linear infinite; 26 /* infinite 一直运行,不停止 */ 27 /* animation: move 3s linear 3s alternate; */ 28 /* alternate趟数为奇数 正向, 趟数是偶数 则反向运动*/ 29 /* animation: move 3s linear */ 30 /* 停止之后回到原来的状态*/ 31 /* animation: move 3s linear forwards */ 32 /* 停止之后保持停止的状态,跳过动画直接显示最终结果或者最初结果.*/ 33 animation-timing-function: steps(1,start); /*start 开始的位置.*/ /* end 结束的位置*/ 34 /* 第一个参数 是走几步完成效果 第二个参数是开始帧或者结束帧 */ 35 /* animation-timing-function: step-start; */ 36 /* */ 37 } 38 @keyframes move{ 39 0%{ 40 left: 0; 41 top: 0; 42 } 43 25%{ 44 left: 400px; 45 top: 0; 46 } 47 60%{ 48 left: 0; 49 top:400px 50 } 51 100%{ 52 top: 400px; 53 left: 400px; 54 } 55 56 } 57 div:hover p{ 58 animation-play-state: paused; /* 进行停止*/ 59 } 60 </style> 61 </head> 62 <body> 63 <div class="box"> 64 <p></p> 65 </div> 66 </body> 67 </html>
案例3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
height: 300px;
width: 300px;
/* background-color: #FFA500; */
margin: 100px auto;
position: relative;
/* perspective: 2500px; /* Z轴距离多远 */
transform-style: preserve-3d; /* 近大院校*/
transition: all 3s;
}
.box div{
height: 300px;
width: 300px;
position: absolute;
}
.top{
transform: translateY(-150px) rotateX(90deg);
background-color: brown;
}
.bottom{
transform: translateY(150px) rotateX(90deg);
background-color: #FFFF00;
}
.left{
transform: translateX(-150px) rotateY(90deg);
background-color: #FFA500;
}
.right{
transform: translateX(150px) rotateY(90deg);
background-color: #008000;
}
.before{
transform: translateZ(150px);
background-color: cornflowerblue;
}
.after{
transform: translateZ(-150px);
background-color: darkgoldenrod;
}
.box:hover{
transform: rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="top">上</div>
<div class="bottom">下</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="before">前</div>
<div class="after">后</div>
</div>
</body>
</html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #box{ 8 width: 200px; 9 height: 200px; 10 margin: 100px auto; 11 position: relative; 12 /* perspective:5000px; */ 13 transform-style:preserve-3d; 14 /* transform: rotateY(-30deg) rotateX(-30deg); */ 15 transition: 20s; 16 } 17 #box div{ 18 width: 200px; 19 height: 200px; 20 position: absolute; 21 transition: 5s; 22 } 23 #box:hover #top{ 24 transform: translateY(-100px) rotateX(90deg); 25 background: #f00; 26 } 27 #box:hover #bottom{ 28 transform: translateY(100px) rotateX(90deg); 29 background: #f0f; 30 } 31 #box:hover #left{ 32 transform: translateX(-100px) rotateY(90deg); 33 background: #ff0; 34 } 35 #box:hover #right{ 36 transform: translateX(100px) rotateY(90deg); 37 background: #0ff; 38 } 39 #box:hover #forword{ 40 transform: translateZ(100px); 41 background: #00f; 42 } 43 #box:hover #after{ 44 transform: translateZ(-100px); 45 background: #000; 46 } 47 48 49 #box:hover{ 50 transform: rotateX(3000deg) rotateY(3000deg); 51 } 52 #box #top{ 53 transform: translateY(-900px) rotateX(90deg) scale(0); 54 } 55 #box #bottom{ 56 transform: translateY(900px) rotateX(90deg) scale(0); 57 } 58 #box #left{ 59 transform: translateX(-900px) rotateY(90deg) scale(0); 60 } 61 #box #right{ 62 transform: translateX(900px) rotateY(90deg) scale(0); 63 } 64 #box #forword{ 65 transform: translateZ(900px) scale(0); 66 } 67 #box #after{ 68 transform: translateZ(-900px) scale(0); 69 } 70 </style> 71 </head> 72 <body> 73 <div id = 'box'> 74 <div id = 'top'></div> 75 <div id = 'bottom'></div> 76 <div id = 'left'></div> 77 <div id = 'right'></div> 78 <div id = 'forword'></div> 79 <div id = 'after'></div> 80 </div> 81 </body> 82 </html>
案例4：轮播
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 li{ 12 list-style: none; 13 } 14 div{ 15 width: 400px; 16 height: 200px; 17 border: 1px solid #000; 18 margin: 50px auto; 19 position: relative; 20 overflow: hidden; 21 } 22 ul{ 23 position: absolute; 24 animation: move 8s linear infinite; 25 } 26 li img{ 27 width: 400px; 28 height: 200px; 29 display: block; 30 } 31 @keyframes move{ 32 0%, 10%{ 33 top:0; 34 } 35 20%, 30%{ 36 top:-200px; 37 } 38 40%, 50%{ 39 top:-400px; 40 } 41 60%, 70%{ 42 top:-600px; 43 } 44 80%, 90%{ 45 top:-800px; 46 } 47 100%{ 48 top:-1000px 49 } 50 /* 0%{ 51 top:0; 52 } 53 100%{ 54 top:-1000px 55 } */ 56 } 57 </style> 58 </head> 59 <body> 60 <div> 61 <ul> 62 <li> 63 <img src="./images/1.jpg" alt=""> 64 </li> 65 <li> 66 <img src="./images/2.jpg" alt=""> 67 </li> 68 <li> 69 <img src="./images/3.jpg" alt=""> 70 </li> 71 <li> 72 <img src="./images/4.jpg" alt=""> 73 </li> 74 <li> 75 <img src="./images/5.jpg" alt=""> 76 </li> 77 <li> 78 <img src="./images/1.jpg" alt=""> 79 </li> 80 </ul> 81 </div> 82 </body> 83 </html>
浙公网安备 33010602011771号