第一天
一、字体图标
下载字体图标
步骤:
使用字体图标
引入相关文件
-
复制相关文件到fonts文件夹里面。
2.引入cs
<link rel="stylesheet" href="./fonts/iconfont.css">
使用类名引入字体图标
如果是一个标签来使用字体文件,可以采取2个类名的形式。(开发最常用)
<span class="iconfont icon-daohangdizhi"></span>
使用unicode编码
<link rel="stylesheet" href="./fonts/iconfont.css">
html标签
<i class="infont"></i>
使用伪元素字体图标
i::after { content: '\e668'; } span::before { content: '\e66f'; }
html标签
<i class="iconfont"></i> <span class="iconfont"></span>
二、变形 transform
位移 translate
translate可以让盒子沿着x轴y轴移动
语法
transform: translateX(); transform: translateY(); transform: translate();
translate 和 margin 的区别
-
translate 使用的百分比,移动的是自身的宽度,而margin 使用的则是父元素的宽度
-
margin 盒子移动会影响其他的盒子。把其他人挤走。而 translate 移动不会影响其他盒子。不脱标。
应用-盒子水平和垂直居中
.box { position: relative; width: 400px; height: 400px; background-color: pink; } .box .son { position: absolute; width: 100px; height: 100px; background-color: skyblue; /* top: 50%; margin-top: -50px; left: 50%; margin-left: -50px; */ top: 50%; left: 50%; transform: translate(-50%,-50%); }
注意还有一种写法
/* .box .son { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 200px; height: 200px; background-color: #f00; } */
开门大吉案例
<!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> * { margin: 0; padding: 0; } .box { width: 1366px; height: 600px; margin: 50px auto; /* background-color: pink; */ background-image: url(./images/bg.jpg); overflow: hidden; } .box>div { width: 50%; height: 100%; float: left; transition: all 0.5s; } .box .left { background: url(./images/fm.jpg) no-repeat left center; /* background-color: #f00; */ } .box:hover .left { transform: translate(-100%); } .box .right { background: url(./images/fm.jpg) no-repeat right center; /* background-color: #0f0; */ } .box:hover .right { transform: translateX(100%); } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
旋转 rotate
让盒子旋转角度
transform: rotate(45deg); /*rotate(turn)
正度数,顺时针旋转
负度数,逆时针旋转
是指中心点 transform-origin
设置旋转的中心点位置
transform-origin: right top;
多形态变形小技巧
如果需要移动,也需要旋转,一定要先移动,在旋转
transform: translate(200px,200px) rotate(400turn);
缩放 scale
transform: scale(1.5)
它比这宽度和高度最大的优势
: 他是用中心点来进行缩放的,同样他不会影响其他的盒子。
倾斜
transform: skew(60deg);
三、渐变
线性渐变
<!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: 400px; height: 400px; /* 默认是垂直渐变色 */ /* background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); */ /* 通过方位名词调整 to就是从哪里开始*/ background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); /* 通过角度渐变 注意带单位deg*/ background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); } </style> </head> <body> <!-- 线性渐变 --> <div class="box"> </div> </body> </html>
第二天
一、空间转换 3D
3D坐标
3D比2D多了一个Z轴
3D位移
transform: translateX(100px); transform: translateY(100px); transform: translateZ(100px); transform: translate3d(x, y, z);
透视
透视的作用: 空间转换时,为元素添加近大远小、近实远虚的视觉效果
perspective: 800px;
透视注意事项
-
取值范围经常在800px~1200px之间。
-
给父元素添加
-
透视距离也是视距
3D旋转
加了透视后,旋转的效果更明显。
rotateX
类似单杠旋转
旋转中心在盒子正中间
body { /* 父级添加透视 */ perspective: 400px; } img { transition: all 1s; } img:hover { transform: rotateX(360deg); }
效果:
rotateY
类似小兔子跳钢管舞
body { perspective: 400px; } img { transition: all 1s; } img:hover { transform: rotateY(360deg); }
效果:
左手法则
-
大拇指指向X轴正向方(右), 则四指指向的方向是旋转的方向
-
大拇指指向Y轴正向方(下), 则四指指向的方向是旋转的方向
立体呈现
让子盒子在父盒子内有空间的展示,此时可以给父亲添加
transform-style: preserve-3d;
二、动画
动画最大的特点可以不用鼠标触发,自动的,反复的执行某些动画。
动画使用分为定义和调用:
1.定义
/* 1. 定义的动画 */ @keyframes dance { from { transform: scale(1) } to { transform: scale(1.5) } }
或
/* 1. 定义的动画 */ @keyframes dance { 0% { transform: scale(1) } 100% { transform: scale(1.5) } }
2.调用
img { width: 200px; /* 2. 使用动画 animation: 动画名称 执行时间; infinite 循环*/ animation: dance .5s infinite; }
动画属性
-
动画名字参照css类选择器命名
-
动画时长和延迟时间别忘了带单位 s
-
infinate 无限循环动画(重复次数)
-
alternate 为反向 就是左右来回执行动画(跑马灯)
-
forwards 动画结束停留在最后一帧状态, 不循环状态使用
-
linear 让动画匀速执行
鼠标经过暂停动画
/* 鼠标经过box, 则 ul 停止动画 */ .box:hover ul { animation-play-state: paused; }
多组动画
/* 我们想要2个动画一起执行 animation: 动画1, 动画2, ... 动画n */ animation: run 1s steps(12) infinite, move 5s linear forwards;