目录
1. animation动画
定义：可以设置一个网页元素，在不同的时间出现在不同的位置，做出不同的动作，从而实现复杂的动画
动画的使用步骤：
- 先定义动画
- 0%: 表示开始状态。可以省略。等同于
from - 其它百分比: 可以定义其它时间节点的运动状态，百分比需要是整数。如49%时运动到右上角
- 100%: 表示结束状态。等同于
to
- 0%: 表示开始状态。可以省略。等同于
- 再使用动画
- 必须指定
animation-name和animation-duration属性
- 必须指定
动画使用属性含义：
- animation-name: 指定使用的动画名称
- animation-duration: 指定动画一个运动周期内，即从from到to需要的时间。单位可以是s或ms。默认是0
- animation-timing-function: 动画的速度曲线，默认是ease。常用的可选参数还有: linear、ease-in、ease-out、ease-in-out
- animation-delay: 打开web页面，延迟多久才开始动画。单位可以是s或ms。默认是0
- animation-iteration-count: 动画循环的次数，默认是1。infinite表示无限循环
- animation-direction: 在第二次循环的时候，默认normal是回到起点开始第二次循环。使用alternate则从终点逆向运动到起点，第三次循环继续从起点开始循环
- animation-fill-mode: 动画结束时的状态。默认backwards是回到起点的状态。forwards则保持运动结束时的最终状态
- animation-play-state: 一般配合hover使用，当鼠标放到web元素上面时，就会
paused暂停动画。默认是running保持运动
动画简写
- 格式:
animation：动画名称 持续时间 运动曲线 何时开始 循环次数 是否逆向 动画结束时状态; - 注意: 不包含
animation-play-state。其中动画名称和持续时间必填，其它可以省略 - 使用多个动画，用逗号分隔
- 例如:
animation: move 3s ease 3s 3 alternate forwards;
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 定义动画 */
@keyframes move {
from {
transform: translateX(0px);
}
49% {
transform: translateX(1000px);
}
to {
transform: translate(1000px, 400px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 使用动画 */
animation-name: move;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 3s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;
}
div:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<ul>
<div></div>
</ul>
</body>
</html>
运动轨迹如下：
- 刚开始盒子位于左上角
- 等过了3秒之后，盒子开始运动到右上角。然后往右下角运动，鼠标放到盒子上面，运动暂停，鼠标离开盒子，盒子继续往右下角运动
- 然后开始第二次循环，从右下角往回运动到右上角，再运动到左上角
- 最后开始第三次循环，从左上角运动到右上角，再运动到右下角
- 最后盒子停留在右下角
2. 3D转换
2.1 介绍
特点：
- 近大远小
- 物体后面遮挡不可见
三维坐标系:
- x轴：水平向右。注意： x右边是正值，左边是负值
- y轴：垂直向下。注意： y下面是正值，上面是负值
- z轴：垂直屏幕。注意： 往外面是正值，往里面是负值
2.2 3D位移
在2D移动的基础上多加了一个z轴移动的方向。因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动(需要使用透视)
- 单独移动z轴:
translform:translateZ(100px)。注意：translateZ一般用px单位 - 一起移动:
transform:translate3d(x,y,z)或transform: translateX(100px) translateY(100px) translateZ(100px)。其中x、y、z分别指要移动的轴的方向的距离
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate3d(100px, 100px, 100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下：
2.3 透视perspective
- 作用: 在2D平面产生近大远小视觉效果，从而实现3D效果。但还是3D物体投影在2D平面上
- 原理: 一、透视就是视距d，即眼睛离屏幕的距离，距离越小物体越大，距离越大物体越小；二、物体向屏幕偏移的距离就是z，z为正看到的物体越大，z为负看到的物体越小
- 实现: 在被观察元素的父元素上，指定
perspective: 100px;，单位是像素
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
perspective: 800px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate3d(100px, 100px, 100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下。perspective的值越小，盒子越大；向z偏移的值越大，盒子越大
2.4 3D旋转
让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转
- transform:rotateX(45deg)：沿着x轴正方向旋转45度
- transform:rotateY(45deg)：沿着y轴正方向旋转45deg
- transform:rotateZ(45deg)：沿着Z轴正方向旋转45deg
- transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转，deg为角度
2.4.1 rotateX
使用左手准则判断旋转方向: 左手的大拇指指向x轴的正方向，其余手指的弯曲方向就是该元素沿着x轴旋转的正方向
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateX(45deg);
}
</style>
</head>
<body>
<img src="media/pig.jpg" alt="">
</body>
</html>
鼠标放到图片上，图片旋转45度的效果
2.4.2 rotateY
使用左手准则判断旋转方向: 左手的大拇指指向y轴的正方向，其余手指的弯曲方向就是该元素沿着y轴旋转的正方向
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateY(45deg);
}
</style>
</head>
<body>
<img src="media/pig.jpg" alt="">
</body>
</html>
鼠标放到图片上，图片旋转45度的效果
2.4.3 rotateZ
使用左手准则判断旋转方向: 左手的大拇指指向z轴的正方向，其余手指的弯曲方向就是该元素沿着z轴旋转的正方向
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateZ(45deg);
}
</style>
</head>
<body>
<img src="media/pig.jpg" alt="">
</body>
</html>
鼠标放到图片上，图片旋转45度的效果
2.4.4 rotate3d
rotate3d(x,y,z,deg)：沿着自定义轴旋转，x、y、z的值可以为0或1或其它矢量值，表示沿着该轴旋转的量，deg为角度。例如：
transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转45degtransform:rotate3d(1,1,0,45deg)就是沿着x和y轴的对角线旋转45deg
同样适用左手准则
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotate3d(1,1,0,45deg);
}
</style>
</head>
<body>
<img src="media/pig.jpg" alt="">
</body>
</html>
鼠标放到图片上，图片旋转45度的效果
2.5 3D呈现transfrom-style
- 作用: 控制子元素是否开启三维立体环境
- 默认:
transform-style: flat，不开启。父元素有3D效果时，子元素只有2D的效果 - 开启: 在父元素使用
transform-style: preserve-3d;。给子元素开启立体空间
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(45deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box1 {
background-color: pink;
}
.box2 {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
不使用transform-style: preserve-3d;。鼠标放到图片上，图片旋转45度的效果
使用transform-style: preserve-3d;。鼠标放到图片上，图片旋转45度的效果
2.6 两面翻转的盒子案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
perspective: 400px;
}
.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: purple;
/*让后面的盒子先旋转180度，避免旋转过来文字反了*/
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">我是男生</div>
<div class="back">我是女生</div>
</div>
</body>
</html>
打开页面，显示的是我是男生，如下所示：
鼠标放到盒子上，显示的是我是女生，如下所示：
2.7 swiper插件
- 使用方式一：
- 从官网的【获取Swiper-下载Swiper】下载swiper-11.0.3.zip，然后查看demo文件夹下的html文件示例
- 自己的html中拷贝html文件示例的html结构、css样式(.swiper开头的)、js语法，然后引用和html文件示例一样的CSS文件(放在引用自己的CSS文件前面)和JS文件
- 查看官网的【API文档】，根据自己的需求进行改造(可以参考多个html文件示例)。其中
swiper-button-prev左箭头和swiper-button-next右箭头的div可以放到swiper-container的div外边
- 使用方式二：
- 在官网的【在线演示-Swiper基础演示】找到类似案例，然后在新窗口打开，右键查看网页源代码
- 自己的html中拷贝网页源代码的html结构、css样式(.swiper开头的)、js语法，然后引用和网页源代码一样的CSS文件(放在引用自己的CSS文件前面)和JS文件
- 查看官网的【API文档】，根据自己的需求进行改造(可以参考多个html文件示例)。其中
swiper-button-prev左箭头和swiper-button-next右箭头的div可以放到swiper-container的div外边
3. 浏览器私有前缀
是为了兼容老版本浏览器的写法，比较新版本的浏览器无须添加。私有前缀如下：
- -moz-：代表firefox浏览器私有属性
- -ms-：代表ie浏览器私有属性
- -webkit-：代表safari、chrome私有属性
- -o-：代表Opera私有属性
提倡的写法如下。一个属性如果存在兼容性问题，则书写多个浏览器的私有前缀属性。如在谷歌浏览器，-webkit-border-radius和border-radius都有效
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
1564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
