字体图标和动画基础-精简

芒果555
354 阅读5分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一.图标字体

1.使用字体图标的优点

灵活性：灵活地修改样式，例如：尺寸、颜色等

轻量级：体积小、渲染快、降低服务器请求次数

兼容性：几乎兼容所有主流浏览器

使用方便.

2.字体图标的下载

1.下载字体图标一般选择阿里巴巴图标库www.iconfont.cn/

优点:网站稳定,字体图标兼容性强,阿里字体库比较稳定，很多情况下，我们无需下载相关文件到本地，直接引入在 线地址即可。

2.下载

登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

3.使用字体图标

先用link标签引入字体图标样式表

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

也可以直接引入阿里在线地址

常用的调用字体图标方式有两种,一是类名调用,二是Unicode编码

1.实用类名

必须给标签两个类,一个是iconfont(基本样式) 二是字体图标的类名 icon--xxx

一般使用i标签,表示字体图标

2.Unicode编码

给外边标签类iconfont,然后在标签里面填写字体图标对应的Unicode编码

二.平面转换

1.位移

使用transform,其中属性translate() 可以让元素水平垂直位移,值可以填写px,百分比等,填写百分比的话是按照自身的尺寸位移,填写两个值 ,第一个代表X轴,第二个代表Y轴,方向正负依据左手法则,填写一个值默认X轴

还可以使用translateX和translateY单独设置X或Y轴

用transform可以更简单的实现div盒子水平垂直居中

.box{ position: absolute;
      right: 50%;
      bottom: 50%;
      transform: translate(50%, 50%);
    }      

2.旋转

使用transform,其中属性rotate() 设置旋转,一定要填写单位deg(度数) ,正直顺时针,负值逆时针

默认旋转点在元素中心,可以通过transform-origin设置旋转点

注意

如果需要让元素变位移变旋转,需要将位移写在旋转前面,因为旋转写在前面会改变X,Y的方向,和过山车一样

3.缩放

使用transform,其中属性scale() 设置缩放,数值填写数字,代表缩放倍数,大于1放大,小于1缩小

注意 上述三个属性不能单独设置,比如

.box{
    transoform:translate(20px);
    transoform:rotate(90deg);
    transoform:scale(1.1);
}

这样写的话下边的会将上边的覆盖,需要同时使用需要同时写在一个transoform里面

.box{
    transoform:translate(20px) rotate(90deg) scale(1.1);
}

渐变效果

使用background-image: linear-gradient()

  background-image: linear-gradient(90deg, pink, skyblue);

第一个值代表渐变的方向,可以使用方位名词,后边可以接多个颜色,用逗号隔开

三.空间转换

3D坐标系

也就比平面多了一个垂直屏幕向外方向的坐标轴Z,向屏幕外代表正,满足左手法则

1.位移

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

透视

透视的作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果

语法:

 perspective: 800px;

  1. 取值范围经常在 800px ~ 1200px 之间。

  2. 一定给父亲添加

  3. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

    • 其中 d 为透视的距离
    • z 是 translateZ 的距离， 这个距离靠近我们，盒子越大

2. 3D旋转

比平面多了个rotateZ

  1. 大拇指指向X轴正向方（右）， 则 四指指向的方向是旋转的方向
  2. 大拇指指向Y轴正向方（下）， 则四指指向的方向是旋转的方向
  3. Z轴就是顺时针正方向,逆时针负方向

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加

 transform-style: preserve-3d;

四.动画(重要)

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

1.定义:

使用 @keyframes + 动画名称

@keyframes move{
    from{               //初始状态
        
    }
    to{					//最终状态
        
    }
}

也可以用百分比代表进程 0%相当于from 100%相当于to

@keyframes move{
    0%{               //初始状态
        
    }
    50%{
        				//中间状态,可添加多个
    }
    100%{					//最终状态
        
    }
}

2.使用:

给需要调用的元素添加 animation: 动画名称 执行时间;

img{
    animation: move 1s;
}

animation有多个属性,使用属性在animation里面进行连写

animation: 动画名称 执行时间 速度曲线 延迟时间 重复次数 动画方向 执行完成时状态

动画名称: 自己需要调用的动画名

执行时间: 整个动画完成的时间 单位一定要写 ,单位是s

速度曲线: linear:从头到尾速度相同

ease:默认值,低速开始,加快,然后结束变慢

ease-in:以低速开始

ease-out:以低速结束

ease-in-out:动画以低速开始和结束

steps(数字): 中间写数字,表示帧的个数,一般配合精灵图实现逐帧动画

延迟时间: 动画延迟的时间,单位写s,animation后边默认第二个时间是延迟时间

重复次数: 写数字,表示重复的次数,也可以写infinite表示无限循环

动画方向: 默认正方向,设置alternate为动画反方向执行,加上循环次数可以写出来回浮动的动画效果

动画执行完毕时状态: forwards： 最后一帧状态 backwards： 第一帧状态

暂停动画: paused为暂停，通常配合:hover使用

注意,如果想添加多个动画,要用逗号隔开

animation:动画1,动画2,动画3;
avatar
文章
阅读
粉丝