一、字体图标
下载字体图标(了解)
-
字体图标的 选择,上传 UI美工她们来做的,我们了解即可。
-
具体的步骤:
使用字体图标(重点)
引入相关文件(前提)
-
复制相关的文件,到
fonts
文件夹里面。 -
-
引入 css
<link rel="stylesheet" href="./fonts/iconfont.css">
使用类名引入字体图标(重点记住)
如果是一个标签来使用字体文件,可以采取2个类名的形式。(开发最常用)
<span class="iconfont icon-daohangdizhi"></span>
-
第一个类名
iconfont
目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。 -
第二个类名
icon-daohangdizhi
, 告诉盒子到底使用哪个小图标。
使用unicode编码(了解)
也可以直接在标签内部放入一个编码
html标签
<strong>  </strong>
css 要指定当前标签的文字是字体图标,必须要声明。
strong { font-family: 'iconfont'; }
使用伪元素字体图标(记住)
<div class="car1">购物车</div>
这样结构比较的清晰,省了很多的小盒子
.car { width: 200px; height: 45px; border: 1px solid pink; text-align: center; line-height: 45px; font-family: 'iconfont'; } .car::before { content: "\e63b"; } .car::after { content: "\e686"; }
注意: 使用伪元素字体图标,一定要声明字体。 font-family: "iconfont"
小结
字体图标是前端工程师必须具备的知识点。 开发中, 字体图标上传,选择,都是网页美工给我们准备好了。
我们重点是下载和使用。
字体图标使用可以整体分为两大步骤:
-
引用线上地址即可。
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">
-
调用。
-
开发中最常用的是使用类名来调用,所以重点记住这个就可以了。
<span class="iconfont icon-daohangdizhi"></span>
-
二、变形 transform(2D)
变形可以改变盒子在平面内的形态(位移、旋转、缩放,倾斜等等)
位移 translate
translate可以让盒子沿着x轴或者y轴来移动。
语法:
transform: translate(x, y); transform: translateX(x); transform: translateY(y);
问题:
-
他和margin有啥区别。
-
margin移动盒子会影响其余的盒子。把其他人挤走。
-
位移translate移动盒子不会影响其他的盒子。不脱标。
-
位移经常需要的场景:
-
比如 盒子上下移动不影响其他盒子
-
盒子水平和垂直居中,写法简单
-
轮播图的动画效果
-
-
注意:
移动的时候可以写百分比,如果使用的百分比,移动的是盒子自身的宽度
transform: translateX(100%);
应用- 盒子水平和垂直
可以让一个子盒子在父盒子里面水平和垂直居中。
.inner { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background-color: skyblue; transform: translate(-50%, -50%); } /* .inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 200px; height: 200px; background-color: skyblue;
开门大吉案例
效果:
<!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-sizing: border-box; } .box { overflow: hidden; width: 1366px; height: 600px; margin: 50px auto; background: url(./images/bg.jpg) no-repeat top center; } .box::before, .box::after { content: ''; width: 50%; height: 600px; transition: .5s; background: url(./images/fm.jpg) no-repeat; } .box::before { float: left; background-color: pink; } .box::after { float: right; background-color: purple; /* 背景图片右对齐 */ background-position: right center; } /* .box:hover .box::before */ /* 鼠标经过 box 大盒子, 两个子盒子(before 和 after)来拉动 */ .box:hover::before { /* 百分比是盒子自身的宽度 */ transform: translateX(-100%); } .box:hover::after { /* 百分比是盒子自身的宽度 */ transform: translateX(100%); } </style> </head> <body> <div class="box"></div> </body> </html>
旋转 rotate
旋转可以让盒子旋转角度。
语法:
transform: rotate(45deg); 一定写单位
如果是正度数,则是顺时针旋转
如果是负度数,则是逆时针旋转
设置中心点 transform-origin
/* 设置旋转的中心点位置 */
transform-origin: right bottom;
多形态变形小技巧
-
如果需要移动,也需要旋转,则一定先写移动,后写旋转, css属性书写顺序影响代码执行。
transform: translate(-50%, -50%) rotate(360deg);
-
注意,多个值之前用 空格隔开。
缩放 scale
语法:
transform: scale(1.5);
它比这宽度和高度最大的优势
: 他是用中心点来进行缩放的,同样他不会影响其他的盒子。
案例:
和平精英
倾斜skew
<!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-color: pink; margin: 100px auto; /* 倾斜里面也是deg 往左倾斜是正值 往右是负值 尽量不要超过90deg,不然就看不到*/ transform: skew(-50deg); } </style> </head> <body> <div class="box"></div> </body> </html>
三、渐变
线性渐变(了解)
基本语法:
<!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; /* 多个颜色使用逗号隔开 默认是从上到下进行渐变*/ /* 渐变色的第一个属性是方向 to属性 方位名词(top上,bottom下,left左,right右)*/ background-image: linear-gradient(to top, yellow, red, green, pink); /* 第一个值写 角度deg */ /* background-image: linear-gradient(45deg, yellow, red, green, pink); */ /* 我们的经常使用方式 黑色半透明 transparent, rgba(0, 0, 0, 0.5) 白色半透明transparent, rgba(255, 255, 255, 0.5)*/ /* background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); */ } </style> </head> <body> <!-- 渐变色是由多个颜色组成 --> <div class="box"></div> </body> </html>
/* 注意渐变色有多种写法,不用去记,后面UI小姐姐会告诉你 */
四、今日单词
单词 | 说明 | 实例 |
---|---|---|
transform | 变形 、转换 | |
rotate | 旋转 | transform: rotate(180deg) |