CSS3动画
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
目录
动画
可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果
<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>
/* 页面一打开一个盒子就从左边走到右边 */
/* 1.定义动画 */
/* @keyframes 动画名称 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2.调用动画 :后面是动画名称*/
animation-name: move;
/* 持续时间 */
animation-duration: .5s;
}
</style>
</head>1.动画序列
<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>
/* from和to等价于0%和100% */
/* @keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(1000px, 0);
}
} */
@keyframes move {
/* 1.可以做多个状态的变化 keyframes关键帧*/
/* 2.里面的百分比要是整数 */
/* 3.里面的百分比就是总的时间划分 */
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 8s;
}
</style>
</head>
<body>
<div></div>
</body>2.动画常见属性
<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>
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 10s;
/* 运动曲线:默认值为easelinear为匀速 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: .5s;
/* 规定动画被播放的次数,默认是1次infinite是无限循环 */
/* animation-iteration-count: infinite; */
/* 是否反方向播放;默认的是normal;alternate就是逆向播放 */
animation-direction: alternate;
/* 动画结束后的状态默认的是backwards 回到起始状态若停留在结束状态forwards*/
animation-fill-mode: forwards;
/* 动画简写属性 */
/* animation:动画名称、持续时间、运动曲线、何时开始、播放次数、是否反方向、动画起始或者结束的状态 */
/* 前面两个属性一定要写 */
}
div:hover {
/* 鼠标经过div,让这个div停止动画鼠标离开就继续动画 */
animation-play-state: paused;
/* animation-play-state: running; */
}
</style>
</head>
<body>
<div></div>
</body>2.1速度曲线细节
animation-timing-function:规定动画的速度曲线
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的匀速 |
| ease | 默认动画以低速开始然后加快在结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps() | 指定了时间函数中的间隔数量步长 |
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>速度曲线步长</title>
<style>
div {
overflow: hidden;
font-size: 20px;
width: 0;
height: 30px;
background-color: pink;
/* 让我们的文字强制一行内显示 */
white-space: nowrap;
/* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
animation: w 6s steps(9) forwards;
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 243px;
}
}
</style>
</head>2.2奔跑的熊
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>奔跑的熊</title>
<style>
body {
background-color: #ccc;
}
div {
position: absolute;
width: 200px;
height: 100px;
background: url(images/bear.png) no-repeat;
/* 我们元素可以添加多个动画 用逗号分隔 */
animation: bear .4s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
/* margin-left: -100px; */
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div></div>
</body>CSS3 3D转换
1.perspective透视
1.如果想要在网页产生3D效果需透视3D物体投影在2D平面内
2.模拟人类的视觉位置
3.透视视距是人到屏幕的距离
4.距离视觉点越近的在电脑平面成像越大越远成像越小
5.透视的单位是像素
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3D位移</title>
<style>
body {
/* 透视写到被观察元素的父盒子上面 */
perspective: 200px;
/* 这个大小必须大于z轴 */
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* transform: translateX(100px);
transform: translateY(100px); */
/* transform: translateX(100px) translateY(100px) translateZ(100px); */
/* 1. translateZ 沿着Z轴移动 */
/* 2. translateZ 后面的单位我们一般跟px */
/* 3. translateZ(100px) 向外移动100px 向我们的眼睛来移动的 */
/* 4. 3D移动有简写的方法 */
/* transform: translate3d(x,y,z); */
/* transform: translate3d(100px, 100px, 100px); */
/* 5. xyz是不能省略的如果没有就写0z的值越大我们看到的就越大 */
transform: translate3d(400px, 100px, 100px);
}
</style>
</head>
<body>
<div></div>
</body>2.3D旋转
<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>rotate</title>
<style>
body {
/* 透视距离越小看到的会越立体 */
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 2s;
}
img:hover {
/* 上边向后倒;沿着X轴正向旋转180度 */
/* transform: rotateX(180deg); */
/* 从左向右转 */
/* transform: rotateY(180deg); */
/* 顺时针方向旋转 */
/* transform: rotateZ(180deg); */
/* transform: rotate3d(x,y,z,deg) */
transform: rotate3d(1, 0, 0, 180deg);
/* 如果围绕两个方向的话就生成一个矢量 */
}
</style>
</head>
<body>
<img src="images/pig.jpg" alt="">
</body>3.3D呈现transform-style
1.控制子元素是否开启三维立体环境
2.transform-style:flat 子元素不开启3D空间 默认的
3.transform-style:perserve-3d;子元素开启立体空间
4.代码写给父级但是影响的是子盒子
<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>
.box {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 1s;
/* 让子元素保持3d立体空间 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>4.两面翻转的盒子案例
<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>
.box {
perspective: 500px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all 4s;
/* 让背面的紫色盒子保留立体空间 给父级添加的 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color: pink;
z-index: 1;
/* 多出的代码尤其注意 */
backface-visibility: hidden;
}
.back {
background-color: blue;
/* 像手机一样 背靠背 旋转 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">世界这么大</div>
<div class="back">我想去看看</div>
</div>
</body>5.3D导航栏
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
float: left;
margin: 0 5px;
width: 120px;
height: 36px;
list-style: none;
/* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
perspective: 500px;
}
.box {
position: relative;
width: 100%;
height: 100%;
/* 让下面的盒子保留立体空间 给父级添加的 */
transform-style: preserve-3d;
transition: all .4s;
}
.box:hover {
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 36px;
}
.front {
background-color: pink;
/* 能够让其在最前面 */
z-index: 1;
/* 最开始的面向前移动高度的一半只有这样才能实现旋转的时候不变两个面形成一个正方体 */
transform: translateZ(18px);
}
.bottom {
color: white;
background-color: purple;
/* 这个x轴一定是负值 */
/* 我们如果有移动 或者其他样式必须先写我们的移动y轴移动是指向下移动到底 */
transform: translateY(18px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<!-- 因为要做导航栏要做多个所以要用ul里的小li -->
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">pink老师等你</div>
</div>
</li>
</ul>
</body>
6.旋转木马案例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>旋转木马案例</title>
<style>
body {
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 150px auto;
transform-style: preserve-3d;
/* 添加动画效果 */
animation: rotate 10s linear infinite;
background: url(images/pig.jpg) no-repeat;
}
section:hover {
/* 鼠标放入section 停止动画 */
animation-play-state: paused;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(images/dog.jpg) no-repeat;
}
section div:nth-child(1) {
transform: rotateY(0) translateZ(300px);
}
section div:nth-child(2) {
/* 先旋转好了再 移动距离 */
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
/* 先旋转好了再 移动距离 ;旋转之后坐标轴也随之改变所以Z轴translate就是向60度方向移动*/
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
/* 先旋转好了再 移动距离 */
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
/* 先旋转好了再 移动距离 */
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
/* 先旋转好了再 移动距离 */
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>浏览器私有前缀
1.-moz- 代表火狐浏览器私有属性
2.-ms- 代表ie浏览器私有属性
3.-webkit- 代表谷歌、苹果浏览器私有属性
4.-o- Opera私有属性