图片的位移,旋转,缩放等8.6

字体图标基本使用:

• 第一种方法

• 注意: 在iconfont网站里面找想要的图片,下载完图片要解压,要找对路径;

1. 将下载的字体文件夹改名为iconfont,放在文件夹里边;
2. 链入iconfont.css样式表文件;
3. 在demo_index.html里面找到unicode编码,粘贴图标对应的unicode编码;
4. 给标签调用iconfont类名;

• 第二种方法(更简单)

1. 将下载的字体的文件夹放到项目目录里边;
2. 链入iconfont.css样式表文件;
3. 给需要使用的字体图标的标签调用iconfont和字体对应的类名,(在demo_index.html里面font class里面找到对应的编码);

4. <span class="iconfont unicode编码 类名></span>

• svg是ui给的图,拿到网站里可以找到编码;

• 位移:

•   transform: translate(x, y);

1. 写第一个值是水平方向X轴,正值向右,负值向左;

2. 两个值都写:第二个值是垂直方向Y轴,正值向下,负值向上;

3. 注意:两个值之间用逗号隔开,如果写百分比参考的是盒子自身的宽高;

• 旋转:

• transform: rotate(360deg);

1. 正值顺时针,负值逆时针,deg是旋转度数;

• 转换原点:

• transform-origin: 50px 100px;

1. 写方位名词:left,right,top,bottom,center;
2. 写具体的px值:第一个X轴向左的距离,第二个是Y轴向下的距离;
3. 参照百分比:参考的是盒子自身的宽高;
4. 注意:两个值之间不需要用逗号隔开;

• 多重转换效果:

•  transform: translate(900px) rotate(360deg);

•  transition: all 3s; 过渡是谁动给谁加
• 注意:多重转换先写位移,再写转换;

• 转换值缩放:

•  transform: scale(2,0.5);

1. 写一个值是等比例缩放.>1 <1;

2. 写两个值是:第一个值代表X轴,第二个值代表Y轴;

3. 缩放不用负值表示,而是用<1的值来表示;

• opacity透明度取值范围0--1;

• 渐变:

•  渐变是颜色逐渐变化的过程,是背景图片的一种特殊情况; 

1. background-image: linear-gradient(red,green,blue);
2. background-image: linear-gradient(to right,red,green,blue);
3. 背景透明: background-image: linear-gradient(transparent,rgba(0,0,0,.5));