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 {
display: block;
margin: 500px auto;
border-radius: 20px;
/* 过渡的成果 */
transition: all 2s linear 0s;
}
img:hover {
/* 旋转 180deg */
transform: rotate(180deg);
}
</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>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
/* 应用过渡成果 */
transition: all 2s linear 0s;
/* 让盒子居中对齐 */
margin: 200px auto;
}
.box:hover {
/* 放大 2.0 倍 不会影响其它元素的地位 */
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: 5s;
}
</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: 5s;
}
</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: 4s;
/* 动画的静止曲线 */
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-color: #333333;}
.map {
/* 应用定位 自绝父相 */
position: relative;
width: 747px;
height: 617px;
background: url(./image/map.png) no-repeat;
margin: 200px auto;
}
.city {
position: absolute;
top: 194px;
left: 500px;
width: 80px;
height: 80px;
}
div.city1 {
position: absolute;
top: 460px;
left: 606px;
}
div.city2 {
position: absolute;
top: 508px;
left: 500px;
}
.circle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background-color: blue;
border-radius: 50%;
}
div[class^="wave"] {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0px 0px 20px skyblue;
border-radius: 50%;
/* 应用动画 */
animation: move 2s linear 0s infinite;
}
.city .wave2 {
/* 应用动画 */
animation: move 2s linear 10s infinite;
}
.city .wave3 {
/* 应用动画 */
animation: move 2s linear 20s infinite;
}
/* 定义动画 */
@keyframes move {
50% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 80px;
height: 80px;
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 class="city city1">
<div class="circle"></div>
<div class="wave1"></div>
<div class="wave2"></div>
<div class="wave3"></div>
</div>
<div class="city city2">
<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>
/* 思路：利用步长可实现打字机成果 */
* {
margin: 0;
padding: 0;
}
.box {
width: 0px;
height: 30px;
/* 让文本强制一行显示 */
white-space: nowrap;
/* 剪裁 */
overflow: hidden;
font-size: 20px;
background-color: pink;
animation: move 2s steps(10) 0s infinite;
}
/* 定义动画 */
@keyframes move {
0% {width: 0px;}
100% {width: 280px;}
}
</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>