CSS字体图标引入, 2Dtransform属性 ,渐变色使用

1.字体图标的引入方式

1.本地引入

<link rel="stylesheet" href="./fonts/iconfont.css">

复制相关的文件，到 fonts文件夹里面。

2.网络地址引入方式

要加http://

<link rel="stylesheet" href="http://at.alicdn.com/t/font_3391737_27qg05rp516.css">

 

2.字体图标的使用

1.使用类名引入

• 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。

• 第二个类名 icon-daohangdizhi， 告诉盒子到底使用哪个小图标。

<link rel="stylesheet" href="./fonts/iconfont.css">
    <style>
        i {
            font-size: 50px !important;
            color: red;
        }
    </style>





<i class="iconfont icon-auto"></i>
<i class="iconfont icon-falling"></i>

2.使用unicode编码

<i class="iconfont">&#xe61e;</i>

3.伪元素写法

<style>
        /* 第三步加伪元素 */
        span::after {
            content: '\e6eb';
        }
    </style>




<span class="iconfont"></span>

3.transform属性用法

1.移动 translate

translate 移动盒子是以自己为参照物,移动是自己的大小

移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

他和margin有啥区别。

• margin移动盒子会影响其余的盒子。把其他人挤走。

• 位移translate移动盒子不会影响其他的盒子。不脱标。

• 位移经常需要的场景：

  • 比如 盒子上下移动不影响其他盒子

  • 盒子水平和垂直居中，写法简单

  • 轮播图的动画效果

2. 旋转 rotate

         一定要写单位       度=deg    一圈=1turn

        如果是正度数，则是顺时针旋转

        如果是负度数，则是逆时针旋转

transform: rotate(45deg);

设置中心点 transform-origin

设置选择中心点

transform-origin: right bottom;

多形态变形小技巧

如果需要移动，也需要旋转，则一定先写移动，后写旋转, (先写旋转的话轴会变化影响后面的移动)     css属性书写顺序影响代码执行。

注意，多个值之前用 空格隔开。

transform: translate(-50%, -50%) rotate(360deg);

3.缩放 scale

它比这宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子。

transform: scale(1.2)；

4.倾斜skew

第一个值代表水平倾斜   第二个值代表垂直倾斜

transform: skew(10deg,60deg);

4.渐变色

.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));
        }