2D
transform
transform(转换)是css3新增的属性 可以实现元素的旋转 位移 缩放等效果
二维坐标系
2D转换是改变元素在二维平面上形状和位置的一种技术
translate(位移)
注意事项
- 所谓的位移 是沿着x轴和Y轴移动位置
- 不会影响到其它元素的位置
- 对行内元素无效
使用方法
- translate(x,y)
- translateX(n):针对X轴
- translateY(n):针对Y轴
- translate(50%,50%) 这里的百分比是根据自身宽度和高度进行移动
<!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>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: red;
margin: 20px 100px;
}
div[class="box"] {
background-color: blue;
transform: translate(200px, 50px);
}
</style>
</head>
<body>
<div class="box"></div>
<div></div>
</body>
</html>
让盒子实现水平和垂直居中对齐
注意：盒子必须是块级元素和行内块元素。可以用tanslate实现，用定位和translate配合更佳
<!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>
div {
position: relative;
width: 600px;
height: 600px;
margin: 200px auto;
background-color: red;
}
p {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background-color: blue;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
旋转
注意事项
- 旋转的单位为deg
- 正值为顺时针旋转 负值为逆时针旋转
- 旋转的中心点为元素的中心点
<!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>
* {
margin: 0;
padding: 0;
}
img {
position: fixed;
left: 50%;
margin: 200px 0px 200px -225px;
border: 1px solid #ccc;
border-radius: 50%;
transition: all 5s linear 0s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./image/星空.jpg" alt="">
</body>
</html>
三角形案例
<!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>
.box {
position: relative;
width: 200px;
height: 35px;
border: 1px solid black;
}
/* 利用伪元素制作案例 */
.box::after {
position: absolute;
top: 9px;
left: 175px;
content: '';
width: 10px;
height: 10px;
border-right: 1px solid red;
border-bottom: 1px solid red;
transform: rotate(45deg);
transition: all 2s linear 0s;
}
/* 鼠标经过div时旋转 */
.box:hover::after {
transform: rotate(-135deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
改变旋转中心点
transform-origin:x y
- x y之间用空格相隔开
- 默认的旋转中心点（50% 50%）
- 可以用像素或者方位名词表示
<!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>
.box {
width: 200px;
height: 200px;
background-color: red;
margin: 200px auto;
transition: all 6s linear 0s;
/* 旋转中心点 左下角 */
transform-origin: left top;
}
.box:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
旋转案例
<!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>
* {
margin: 0;
padding: 0;
}
.box {
height: 400px;
width: 400px;
border: 1px solid red;
margin: 200px auto;
overflow: hidden;
}
.box::after {
display: block;
content: "";
width: 400px;
height: 400px;
background-color: red;
transform-origin: right bottom;
transform: rotate(90deg);
transition: all 1s linear 0s;
}
.box:hover::after {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
缩放
scale(x,y)
注意事项 -scale(1,1) 宽高及放大1倍
- scale(2,3) 宽放大2倍 高放大3倍
- scale(5) 宽高都放大5倍
- 优点：可以设置旋转中心点，缩放的时候不会影响其它元素
<!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>
.box {
width: 200px;
height: 200px;
margin: 300px auto;
border-radius: 50%;
background-color: red;
transition: all 2s linear 0s;
}
.box:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
图片放大案例
<!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>
/* img放大star */
* {
margin: 0;
padding: 0;
}
div {
float: left;
overflow: hidden;
width: 450px;
height: 288px;
margin: 50px;
}
img {
transition: all 2s linear 0s;
}
img:hover {
transform: scale(2);
}
/* img放大 end */
</style>
<body>
<div><img src="./image/星空.jpg" alt=""></div>
<div><img src="./image/星空.jpg" alt=""></div>
<div><img src="./image/星空.jpg" alt=""></div>
</body>
</html>
分页案例
<!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>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
margin: 200px auto;
}
li {
float: left;
list-style: none;
width: 30px;
height: 30px;
border: 1px solid #cccccc;
border-radius: 50%;
text-align: center;
line-height: 30px;
margin: 50px 20px;
transition: all 3s linear 0s;
}
li:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<div style="clear: both;"></div>
</ul>
</div>
</body>
</html>
2D综合写法
注意事项
- CSS 2D的属性可以实现综合写法
- transform:translate(x,y) rolate(n) scale(n) 按照这个顺序来写，属性之间用空格相隔
- 位移放在最前面 切记不能改变顺序
<!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>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
/* 设置过渡效果 */
transition: all 2s linear 0s;
}
.box:hover {
/* 记住顺序 先设置 *位移 再设置旋转 最后设置缩放*/
transform: translate(200px, 200px) rotate(200deg) scale(2);
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>
动画
动画 相比于过渡 可以实现更多变化 更多控制 自动播放等
使用动画的步骤
-
先定义动画
-
再使用（调用）动画
-
定义动画使用@keyframes 0%是起始状态 100%是结束状态。
-
调用动画必须需要的两个属性 animation-name ainimation-duration(动画的持续时间)
<!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>
* {
margin: 0;
padding: 0;
}
/* 定义动画 */
@keyframes move {
0% {
transform: translate(0px, 0px);
}
100% {
/* 警告 ：translate(x,y)要加逗号 */
transform: translate(1000px, 0px);
background-color: blue;
border-radius: 50%;
}
}
.box {
width: 200px;
height: 200px;
background-color: red;
/* 动画的名字 */
animation-name: move;
/* 动画的持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
动画的基本实现
注意事项
- form to等价于 0% 100%
- 实现更多细节可以用百分比来实现
<!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: translate(0, 0);
}
25% {
transform: translate(1600px, 0);
}
50% {
transform: translate(1600px, 800px);
}
75% {
transform: translate(0px, 800px);
}
100% {
transform: translate(0px, 0px);
}
}
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: blue;
animation-name: move;
animation-duration: 10s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
动画属性
<!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>
* {
margin: 0;
padding: 0;
}
/* 定义动画 */
@keyframes move {
25% {
transform: translate(1350px, 0px);
}
50% {
transform: translate(1350px, 600px);
}
75% {
transform: translate(0px, 600px);
}
100% {
transform: translate(0px, 0px);
}
}
.pic-con {
width: 450px;
height: 288px;
overflow: hidden;
border-radius: 40px;
margin: 10px;
/* 使用动画 */
/* 动画名字 */
animation-name: move;
/* 动画的持续时间 */
animation-duration: 10s;
/* 动画的运动曲线 */
animation-timing-function: linear;
/* 动画的延迟 */
animation-delay: 0s;
/* 动画的播放次数 */
animation-iteration-count: infinite;
/* 是否反方向播放 */
animation-direction: alternate;
/* 动画结束后保持的状态 可省略*/
/* animation-fill-mode: forwards; */
}
/* 鼠标移动到此处 动画停止播放 */
.pic-con:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="pic-con">
<img src="./image/星空.jpg" alt="">
</div>
</body>
</html>
注意事项 规定动画结束后的状态与动画的播放次数和是否反向播放有冲突
动画的简写
<!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: translate(0, 0);
}
25% {
transform: translate(1600px, 0);
}
50% {
transform: translate(1600px, 800px);
}
75% {
transform: translate(0px, 800px);
}
100% {
transform: translate(0px, 0px);
}
}
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: blue;
/* 动画的简写 */
animation: move 10s linear 0s infinite alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html><!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: translate(0, 0);
}
25% {
transform: translate(1600px, 0);
}
50% {
transform: translate(1600px, 600px);
}
75% {
transform: translate(0px, 600px);
}
100% {
transform: translate(0px, 0px);
}
}
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: blue;
/* 动画的简写 */
animation: move 10s linear 0s infinite alternate;
}
.box:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
热点图
思路：利用定位和动画可做出效果，必须确保向外扩散的波浪线位于中心位置，且用盒子阴影颜色替代背景色
注意：为什么不用scale呢，因为scale会把盒子的阴影放大，视觉会受到影响
<!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>
* {
margin: 0;
padding: 0;
}
body {
background: #333
}
.map {
position: relative;
width: 747px;
height: 617px;
background: url(./image/map.png) no-repeat;
margin: 200px auto;
}
.map .city {
position: absolute;
top: 228px;
left: 542px;
}
.circle {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #09f;
}
div[class^='wave'] {
/* 必须保证盒子在中心位置 且向四周拓展 */
position: absolute;
width: 8px;
height: 8px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 12px #009dfd;
border-radius: 50%;
animation: move 1.2s linear 0s infinite;
}
.map .city div.wave2 {
animation-delay: 0.4s;
}
.map .city div.wave3 {
animation-delay: 0.6s;
}
@keyframes move {
50% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="circle"></div>
<div class="wave1"></div>
<div class="wave2"></div>
<div class="wave3"></div>
</div>
</div>
</body>
</html>
速度曲线详解
打字机效果
<!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>
.box {
width: 0;
height: 30px;
font-size: 20px;
background-color: pink;
/* 强制一行显示 */
white-space: nowrap;
/* 溢出剪裁 */
overflow: hidden;
animation: move 4s steps(15) 0s infinite forwards;
}
@keyframes move {
0% {
width: 0px;
}
100% {
width: 300px;
}
}
</style>
</head>
<body>
<div class="box">大家好 我的名字叫尧子陌</div>
</body>
</html>
奔跑的小熊
注意：背景图片和小熊的奔跑，用的是背景图片
<!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>
* {
margin: 0;
padding: 0;
}
body {
background: url(./image/抽象.jpg) no-repeat fixed top center;
background-size: cover;
}
.box {
position: fixed;
width: 200px;
height: 100px;
top: 50%;
transform: translate(0px, -50px);
background: url(./image/bear.png) no-repeat;
animation: bear 0.4s steps(8) 0s infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0px;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>