CSS|动画与效果
一. 过渡
1 什么是过渡
过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果
2 应用场景
当鼠标hover的时候, 有一个明显的突出效果, 但是又不会显得特别生硬
3 使用
1) 语法
transition: 属性 时长 缓动函数
- 属性: 可以是具体的某个属性, 或者是全部(all)
- 时长: 变化持续时间
- 缓动函数:
-
- ease: 相对于匀速，中间快，两头慢
- ease-in: 相对于匀速，开始的时候慢，之后快
- ease-out: 相对于匀速，开始时快，结束时候间慢
- ease-in-out: 开始慢, 中间加速, 结束慢
- linear: 一直匀速
2) 示例
<!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>Document</title>
<style>
#box {
width: 200px;
height: 100px;
background-color: skyblue;
transition: width 1s ease-in-out;
}
#box:hover {
width: 100px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
二. 变换
变换可以是二维, 也可以是三维.
这里, 主要给大家介绍基础的二维变换, 主要包括
- 平移
- 缩放
- 旋转
1 平移
transform: translate
- 沿
x轴(水平)方向移动 - 沿
y轴(垂直)方向移动
示例
<!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>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: skyblue;
transform: translate(100px, 100px);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
2 缩放
transform: scale
<!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>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: skyblue;
transform: scale(1.1);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
可以配合transition使用
示例
<!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>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: skyblue;
transition: all 1s ease;
}
#box:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
3 旋转
transform: rotate
示例
<!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>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: skyblue;
transition: all 0.5s ease;
}
#box:hover {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div id="box">内容</div>
</body>
</html>
三. 动画
CSS动画包括两个部分：
- 描述动画的样式规则: 相关属性
animation(动画播放器) - 用于指定动画开始、结束以及中间点样式的关键帧: 相关属性
@keyframes(动画内容)
1 animation
- name: 动画名称
- duration: 动画持续时间
- easing-function: 缓动函数
- delay: 延迟
- count: 次数(infinite)
2 关键帧
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(100px);
}
}
#box {
width: 100px;
height: 100px;
background-color: skyblue;
animation: move 3s ease 0s infinite alternate;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
