目录
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;